React To Do List点击添加后视图不更新问题如何解决

以下是导致待办内容不渲染的核心问题和修复方案：

• 错误1：App组件渲染时给Container传的list参数错误，你使用了addTodo函数内部的局部变量newtodo，该变量在组件渲染作用域下不存在，实际应该传递你定义的状态变量list
• 错误2：addTodo函数更新逻辑错误，你每次新增待办都是基于初始的静态todo数组拼接，没有基于当前最新的list状态，导致每次新增都会丢失之前新增的内容，状态更新不符合预期
• 错误3：列表循环缺少合法key，你把key属性写在了TodoComponent内部的h3标签上，按React规范key需要绑定在循环返回的最外层节点上，也就是TodoComponent标签上，否则会触发警告也可能影响列表渲染更新
• 额外问题：你的Container组件没有引入TodoComponent，会导致组件未定义报错，记得补全引入路径

修复后的App.js代码 #

import './App.css';
import Navbar from './components/Header'
import Container from './components/Container.js';
import Input from './components/Input';
import { useState } from 'react';
function App() {
  // 初始待办直接放在useState默认值即可，无需单独定义静态变量
  const [list,setList] = useState([
    {
      id:Math.random()*10000,
      title: "Walk the dog",
      completed:false
    },
    {
      id:Math.random()*10000,
      title: "Wash Dishes",
      completed:false
    },
  ])

  function addTodo(e) {
    let value = e.target.previousElementSibling.value;
    // 加空值判断，避免新增空白待办
    if(!value.trim()) return
    // 基于最新的list状态生成新数组
    let newtodo = [...list,{id: Math.random()*10000, title: value, completed:false}]
    setList(newtodo)
    // 新增后清空输入框，优化体验
    e.target.previousElementSibling.value = ''
  }

  return (
    <div className="body">
       <Navbar className="Navbar"/>
       <Input method = {addTodo} />
       {/* 修复：传递状态变量list，而非不存在的newtodo */}
       <Container list={list}/>
    </div>
  );
}

export default App;

修复后的Container组件代码 #

// 补全TodoComponent的引入，路径根据你实际的文件结构调整即可
import TodoComponent from './TodoComponent'

const Container =({list , method})=> {
    return(
        <div className="container">
            {list.map(element => {
                // 修复：把key绑定到循环返回的最外层组件上
                return(
                    <TodoComponent className="todo-list" data={element} key={element.id}/>
                )
        })}
        </div>
    )
}

export default Container

修改完以上内容后，新增待办就可以正常渲染了，TodoComponent内部h3上的key属性可以删掉。

内容的提问来源于stack exchange，提问作者Kevin H