質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

842閲覧

SetStateをしても、再度レンダーされない

Awtanabe

総合スコア25

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/07/26 08:06

SetStateをしても、再度レンダーされない

お聞きしたい事

handleSubmitの箇所でsetStateをするも、再度レンダーされません。
Object.assignで、新しいTodosを作成しているのですが、再度レンダーされません。

こちら更新の方法がよくないと思うのですが、どなたかお分かりになる方はいらっしゃいますでしょうか?

import React from 'react'; import logo from './logo.svg'; import './App.css'; import Todos from './components/Todo/Todos' import Form from './components/Todo/Form' type Todo = { id:number body: string } type TodoState = { todos: Todo[] value: string } class App extends React.Component<{}, TodoState> {  constructor(props: any) { super(props) this.state = { todos: [{id:1, body: "todo1"},{id:2, body: "todo2"}], value: '' } } handleSubmit(e: React.FormEvent<HTMLFormElement>):void { e.preventDefault() const newTodos = Object.assign([], this.state.todos,[...this.state.todos, {id: this.state.todos.length + 1, bodu: this.state.value}]) this.setState({todos: newTodos}) } handleTodoValue(e: React.ChangeEvent<HTMLInputElement>): void { this.setState({value: e.target.value}) } render () { const {todos} = this.state console.log(this.state) return ( <div className="ui main"> <form onSubmit={this.handleSubmit.bind(this)}> <input type="input" onChange={this.handleTodoValue.bind(this)}/> <input type="submit" value="追加"/> </form> <Todos todos={todos}/> </div> ); } } export default App;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決しました。

const newTodos = Object.assign([], this.state.todos,[...this.state.todos, {id: this.state.todos.length + 1, body: this.state.value}]) body箇所がboduになっていました。。。

投稿2020/07/26 08:07

Awtanabe

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問