React待办列表遇key属性警告及渲染异常，求解决方案

问题1："Each child in a list should have a unique 'key' prop" 警告解决 #

• 你当前把key加在了<Task>组件上，但循环返回的最外层根元素是<div>，React要求循环生成的每个根元素必须携带唯一key。
• 另外不推荐用数组索引i作为key——当列表元素增删、排序时，索引会变动，容易引发渲染异常。建议给每个待办项添加唯一标识，比如用时间戳生成自增ID：
  修改AddTask函数，给新任务追加ID：

  function AddTask() {
    if (!task.trim()) return; // 避免添加空任务
    setTaskList([...taskList, { id: Date.now(), task: task }]);
    setTask('');
  }
  

  循环时把key绑定在外层<div>上，用任务ID作为唯一标识：

  {
    taskList.map((taskItem) => {
      return (
        <div key={taskItem.id}>
          <Task task={taskItem.task} />
        </div>
      )
    })
  }
  

问题2：待办项无法正常渲染的解决 #

• Props接收错误：你的Task组件参数命名为task，但实际传入的props是{ task: 任务内容 }，组件里却用了task.item（不存在的属性）。正确接收方式有两种：

  import React from 'react';
  
  // 方式1：解构props直接获取task
  function Task({ task }) {
    return (
      <div>
        {task}
      </div>
    )
  }
  
  // 方式2：通过props对象访问
  // function Task(props) {
  //   return (
  //     <div>
  //       {props.task}
  //     </div>
  //   )
  // }
  
  export default Task;
  

• 状态初始化错误：useState()初始化task时未赋值，默认是undefined，建议初始化为空字符串，同时给输入框添加value绑定，让输入框成为受控组件：

  const [task, setTask] = useState('');
  // 输入框修改
  <input 
    type='text' 
    placeholder='输入你的任务' 
    value={task}
    onChange={(e) => setTask(e.target.value)} 
  />
  

修正后的完整代码 #

App.js

import React, { useState } from 'react';
import Task from './component/Task'

function App() {
    const [task, setTask] = useState('');
    const [taskList, setTaskList] = useState([]);

    function AddTask() {
        if (!task.trim()) return;
        setTaskList([...taskList, { id: Date.now(), task: task }]);
        setTask('');
    }

    return (
        <div>
            <h1>待办列表</h1>
            <input 
                type='text' 
                placeholder='输入你的任务' 
                value={task}
                onChange={(e) => setTask(e.target.value)} 
            />
            <button onClick={AddTask}>添加任务</button>
            {
                taskList.map((taskItem) => (
                    <div key={taskItem.id}>
                        <Task task={taskItem.task} />
                    </div>
                ))
            }
        </div>
    )
}

export default App;

Task.js

import React from 'react';

function Task({ task }) {
    return (
        <div>
            {task}
        </div>
    )
}

export default Task;

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