React TodoList已分配唯一ID仍报unique key prop错误原因求解

你只需要修改

return (<TodoList />)

// 修改前
<label keys={task.id} className="item-container">

// 修改后
<label key={task.id} className="item-container">

另外你的代码还存在2个潜在问题需要修复：

• 任务删除逻辑直接修改了原state的数组：const newTasksList = this.state.tasks是引用赋值，直接调用splice会修改原state数据，违反React state不可变原则，可能导致更新异常，正确写法如下：

  handleRemove(index) {
    // 先拷贝原数组再修改
    const newTasksList = [...this.state.tasks];
    newTasksList.splice(index, 1);
    this.setState({ tasks: newTasksList });
  }
  

• 用Math.random()生成任务ID存在极小概率的重复风险，更稳妥的方案可以选择递增数值、专门的uuid生成库，或者时间戳加随机后缀的组合。

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