Javascript React应用程序类赢得'；在子组件更改时不渲染

我刚开始学反应。我正在尝试写一个待办事项列表，目前为止，它看起来像：

但是，当我选中Todo的复选框时，即使Todo列表的状态发生更改（我刚刚选中的Todo的“checked”属性更改为true），剩余要做的事情的计数也不会更改

我的App.js：

import React, {Component} from 'react';
import TaskComponent from "./TaskComponent";

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            taskList: [],
            newTaskContent: ''
        }
        this.generateTask = this.generateTask.bind(this)
        this.updateNewTaskContent = this.updateNewTaskContent.bind(this)
    }

    generateTask() {
        if (this.state.newTaskContent) {
            const joined = this.state.taskList.concat({
                id: this.state.taskList.length + 1,
                content: this.state.newTaskContent,
                checked: false
            })
            this.setState({taskList: joined, newTaskContent: ''})
        }
    }

    updateNewTaskContent({target: {value}}) {
        this.setState({newTaskContent: value})
    }

    render() {
        return (
            <div>
                <ul>{this.state.taskList.map(task => <TaskComponent key={task.id} task={task.content}
                                                                    checked={task.checked}/>)}</ul>
                <input type='text' placeholder='Type your new task'
                       onChange={this.updateNewTaskContent} value={this.state.newTaskContent}/>
                <button name='generateTask' onClick={this.generateTask}>Generate task</button>
                <div>There are {this.state.taskList.filter(task => !task.checked).length} things left to do!</div>
            </div>
        );
    }
}

export default App;

import React，{Component}来自'React'；
从“/TaskComponent”导入TaskComponent；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
任务列表：[]，
newtask内容：“”
}
this.generateTask=this.generateTask.bind（this）
this.updateNewTaskContent=this.updateNewTaskContent.bind（this）
}
生成任务（）{
if（this.state.newTaskContent）{
const joined=this.state.taskList.concat({
id:this.state.taskList.length+1，
内容：this.state.newTaskContent，
勾选：假
})
this.setState（{taskList:joined，newTaskContent:''}）
}
}
updateNewTaskContent（{target:{value}}）{
this.setState（{newTaskContent:value}）
}
render（）{
返回(
{this.state.taskList.map（task=>）}
生成任务
还有{this.state.taskList.filter（task=>！task.checked）.length}事情要做！
);
}
}
导出默认应用程序；

My TaskComponent.js文件：

import React, {Component} from 'react'

class TaskComponent extends Component {
    constructor({task, checked}) {
        super(undefined)
        this.state = {
            taskContent: task,
            checkedState: checked
        }
        this.changeHandler = this.changeHandler.bind(this)
    }

    changeHandler({target: {checked}}) {
        this.setState({checkedState: checked})
    }

    render() {
        return (
            <div>
                <span>{this.state.taskContent}</span>
                <input type="checkbox" checked={this.state.checkedState} onChange={this.changeHandler}/>
            </div>
        );
    }
}

export default TaskComponent;

import React，{Component}来自“React”
类TaskComponent扩展组件{
构造函数（{task，checked}）{
超级（未定义）
此.state={
任务内容：任务，
checkedState:已选中
}
this.changeHandler=this.changeHandler.bind（this）
}
changeHandler（{target:{checked}}）{
this.setState（{checkedState:checked}）
}
render（）{
返回(
{this.state.taskContent}
);
}
}
导出默认任务组件；

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
任务列表：[]，
newtask内容：“”
}
this.generateTask=this.generateTask.bind（this）
this.updateNewTaskContent=this.updateNewTaskContent.bind（this）
}
生成任务（）{
if（this.state.newTaskContent）{
const joined=this.state.taskList.concat({
id:this.state.taskList.length+1，
内容：this.state.newTaskContent，
勾选：假
})
this.setState（{taskList:joined，newTaskContent:''}）
}
}
updateNewTaskContent（{target:{value}}）{
this.setState（{newTaskContent:value}）
}
render（）{
返回(
{this.state.taskList.map（task=>）}
生成任务
还有{this.state.taskList.filter（task=>！task.checked）.length}事情要做！
);
}
}
类TaskComponent扩展了React.Component{
构造函数（{task，checked}）{
超级（未定义）
此.state={
任务内容：任务，
checkedState:已选中
}
this.changeHandler=this.changeHandler.bind（this）
}
changeHandler（{target:{checked}}）{
this.setState（{checkedState:checked}）
}
render（）{
返回(
{this.state.taskContent}
);
}
}
ReactDOM.render（，document.querySelector（“#root”）
您正在TaskComponent中设置状态，并希望它更改App.js中的道具

与其在检查TaskComponents时设置其状态，我建议在检查TaskComponents时调用作为道具传入的函数，该函数具有其
id
和新值。大致如下：

App.js：

// somewhere in your class:
handler(id, value) {
  // set state to reflect changes
}

// in your render()
<ul>{this.state.taskList.map((task) => {
<TaskComponent onChange={this.handler} id={task.id} key={task.id} task={task.content} checked={task.checked} />})}</ul>

我还建议将TaskComponent设置为完全没有状态，因为我觉得这似乎没有必要。
所有任务都有自己的状态。您正在更改状态，但未通知家长。在parent中，您有任务列表及其状态，但当您更新状态（已选中）时，您没有通知父级。在
TaskComponent
中状态已更改，
App
组件不知道任何
TaskComponent
的选中状态已更改。无需在
TaskComponent
组件中保存状态，在
App
组件中维护状态，并将更改处理程序函数作为道具从
App
组件传递到
TaskComponent
。
changeHandler({target: {checked}}) {
    this.props.onChange(this.props.id, checked);
}