編集履歴

質問編集履歴

propsを親コンポーネントから子コンポーネントに受け渡すようにしたところ、別のエラーが発生しました。

2019/12/04 09:28

投稿

chigu4ps5

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -54,19 +54,105 @@
       id: uniquId
+    };
+    let add = tasks.concat(task)
+    this.setState({
+      tasks: add,
+      uniquId: uniquId + 1
+    });
+  }
+   deleteTodo(i) {
+    let deleTask = this.state.tasks.splice(i, 1);
+    this.setState({
+      tasks: deleTask
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h1>Todoリスト</h1>
+        <TodoList tasks={this.state.tasks} deleteTodo={this.deleteTodo}/>
+        <TodoAdd addTask={this.addTask}/>
+      </div>
+    );
+  }
+}
+export default App;
+```
+`TodoAdd`
+```
+import React, { Component } from 'react';
+class TodoAdd extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: null,
     }
+    this.handleChange = this.handleChange.bind(this);
-    let add = tasks.concat(task)
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleChange(e) {
     this.setState({
-      tasks: add,
-      uniquId: uniquId + 1
+      inputValue: e.target.value,
     });
@@ -74,23 +160,19 @@
-  deleteTodo() {
+  handleClick() {
-    const clearTask = this.state.tasks;
+    const inputValue = this.state.inputValue;
-    const deleTask =  clearTask.splice(this.state.id, 1);
+    this.props.addTask(inputValue);
     this.setState({
-      tasks: deleTask
+      inputValue: "",
-    });
+    })
-  }
+  }
@@ -100,208 +182,94 @@
       <div>
+        <input
+          type="text"
+          value={this.state.inputValue}
-        <h1>Todoリスト</h1>
+          onChange={ this.handleChange }
-        <TodoList tasks={this.state.tasks} deleteTodo={this.deleteTodo}/>
+        />
-        <TodoAdd addTask={this.addTask}/>
+        <button onClick={this.handleClick}>送信</button>
       </div>
+    );
+  }
+}
+export default TodoAdd;
+```
+export default ToDoList;
+```
+class ToDoList extends React.Component{
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <ul>
+          {this.props.tasks.map((item) => <li key={item.id} >
+            {item.text}
+            <button onClick={this.props.deleteTodo(item.id)}>削除</button>
+          </li>)}
+        </ul>
+      </div>
     );
-  }
+  };
 }
-export default App;
+export default TodoList;
-```
+```
-`TodoAdd`
+`index`
-```
-import React, { Component } from 'react';
-class TodoAdd extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      inputValue: null,
-    }
-    this.handleChange = this.handleChange.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-  }
-  handleChange(e) {
-    this.setState({
-      inputValue: e.target.value,
-    });
-  }
-  handleClick() {
-    const inputValue = this.state.inputValue;
-    this.props.addTask(inputValue);
-    this.setState({
-      inputValue: "",
-    })
-  }
-  render() {
-    return (
-      <div>
-        <input
-          type="text"
-          value={this.state.inputValue}
-          onChange={ this.handleChange }
-        />
-        <button onClick={this.handleClick}>送信</button>
-      </div>
-    );
-  }
-}
-export default TodoAdd;
-```
-`TodoList`
 ```
 import React from 'react';
-import Todo from './Todo';
-const ToDoList = ({ tasks }) => (
-  <div>
-    {tasks.map(item =>
-      <Todo
-        tasks={item.tasks}
-        text={item.text}
-        id={item.id}
-        deleteTodo={this.deleteTodo}
-    />
-      )
-    }
-  </div>
-);
-export default ToDoList;
-```
-`Todo`
-```
-class Todo extends React.Component {
-  render() {
-  return (
-  <ul>
-    <li key={this.props.id}>{this.props.text}</li>
-      <button onClick={this.props.deleteTodo()}>削除</button>
-  </ul>);
-  }
-}
-export default Todo;
-```
-`index`
-```
-import React from 'react';
 import ReactDOM from 'react-dom';
 import './App.css';
@@ -336,54 +304,74 @@
 ```
-TypeError: Cannot read property 'deleteTodo' of undefined
+Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
+▶ 4 stack frames were collapsed.
+App.deleteTodo
+src/App.js:35
+  32 |
+  33 |   deleteTodo(i) {
+  34 |     let deleTask = this.state.tasks.splice(i, 1);
+> 35 |     this.setState({
+  36 |       tasks: deleTask
+  37 |     });
+  38 | }
+View compiled
 (anonymous function)
 src/TodoList.js:15
-  12 |     tasks={item.tasks}
+  12 |        <ul>
+  13 |          {this.props.tasks.map((item) => <li key={item.id} >
-  13 |     text={item.text}
+  14 |            {item.text}
-  14 |     id={item.id}
+> 15 |            <button onClick={this.props.deleteTodo(item.id)}>削除</button>
-> 15 |     deleteTodo={this.deleteTodo}
+     | ^  16 |          </li>)}
-     | ^  16 | />
+  17 |        </ul>
-  17 |   )
-  18 | }
+  18 |
 View compiled
-ToDoList
+ToDoList.render
-src/TodoList.js:8
+src/TodoList.js:12
-   5 |
+   9 | render() {
-   6 | const ToDoList = ({ tasks }) => (
+  10 |   return (
-   7 |
->  8 |   <div>
+  11 |     <div>
-   9 |
-  10 |     {tasks.map(item =>
-  11 |       <Todo
+> 12 |       <ul>
+     | ^  13 |         {this.props.tasks.map((item) => <li key={item.id} >
-View compiled
+  14 |           {item.text}
+  15 |           <button onClick={this.props.deleteTodo(item.id)}>削除</button>
-```
+```
-メソッドを定義できていない、コンポーネント間のpropsの受け渡しができていない、削除の部分が間違っているように思いますが、初心者のため、はっきりとした原因が分かりません。
+削除の部分が間違っているように思いますが、初心者のため、はっきりとした原因が分かりません。
 教えていただけると嬉しいです。