React跨组件传递state作为props时状态更新后子组件视图无响应
你的代码里三个独立的逻辑问题叠加，直接导致了“控制台看似有值流转、但视图不更新”的现象，逐个对应说明：
1. 视图不更新的核心原因：子组件对props的错误拷贝
这是最关键的问题。你在TodoList的constructor里写了displayOn: this.props.display，把父组件传进来的props值拷贝到了自己的内部state里。
类组件的constructor只会在组件首次挂载的那一刻执行一次，后续父组件传来的props发生变化时，根本不会重新跑constructor的赋值逻辑。TodoList内部的displayOn会永远停留在首次挂载时拿到的旧props值，哪怕父组件的display状态已经反复切换，TodoList读的还是自己内部锁死的那个初始值，自然不会触发任何样式变化。
本质上你完全没必要把这个展示状态存在TodoList的内部state里——这个值本来就是父组件传进来的，直接在render方法里读this.props.display就行，props一旦变化会自动触发组件重渲染。如果确实需要在子组件内部对这个值做二次加工，要么在componentDidUpdate生命周期里做props到state的同步，要么用React的派生状态逻辑，绝对不能只在constructor里存一次props就不管了。
2. 状态值错位的原因：读取state的时机错误
React类组件的setState是异步批量更新的，你在TurnOnBtn的handleState里执行的顺序是：
// 通知React要把display改成相反值 this.setState({ display: !this.state.display }); // 立刻读this.state.display传给父组件 this.props.checkDisplay(this.state.display);
这时候React还没完成这次的状态更新流程，你拿到的this.state.display还是点击触发前的旧值。比如初始值是false，你点按钮想把它改成true，但传出去的还是false；下次再点想改成false，传出去的又是true，状态值全程错位。
正确的写法是先把要传的新值明确计算出来，不要依赖setState之后的旧state：
handleState() { const nextDisplayValue = !this.state.display; this.setState({ display: nextDisplayValue }); // 直接把算好的新值传出去，不读缓存的旧state this.props.checkDisplay(nextDisplayValue); }
更进一步说，TurnOnBtn本身根本没必要存一份自己的display状态——这个开关的单一数据源是父组件App，按钮只要把点击动作回调给父组件，让父组件自己计算切换后的新值就行，删掉子组件重复存的state能从根源上减少这类错位问题。
3. 控制台误导的原因：setState后立刻读state拿到的是旧值
你在App的checkDisplay里调用完this.setState马上打印this.state，看到的同样是状态更新之前的旧值——这也是为什么你会觉得“控制台能看到状态正常流转”，实际上打印出来的根本不是最新的状态值。如果要在状态真正更新完成后拿到最新值，可以用setState提供的回调参数：
checkDisplay(newDisplay) { this.setState( { display: newDisplay }, // 等React完成状态更新流程后，再打印真实的最新state () => console.log(this.state) ); }
按顺序改完就能立刻解决现有问题：
- 删掉TodoList内部存
displayOn的state字段，把render里读this.state.displayOn的地方直接改成读this.props.display，样式绑定的逻辑同步调整 - 修正TurnOnBtn里的传值逻辑，先计算新的开关值，再分别调用setState和传值给父组件
- 把App里的console.log移到setState的回调里，就能看到真实的状态流转值，不会再被旧值误导
额外注意点
你在渲染Todo列表时使用key={uuid()}作为列表项的key，会导致每次TodoList重渲染时，所有Todo组件都会被强制卸载、重新挂载，带来不必要的性能损耗，后续重构时可以直接使用每个todo自身存储的唯一id作为key值。
内容的提问来源于stack exchange，提问作者bartul_9
