React中列表项函数调用失效及key重复问题求助

问题1：点击列表项无法触发deleteItem函数 #

原因：组件传参与接收存在拼写错误。App.jsx中传递的props是onChecked，但ToDoItem.jsx里写成了onCheked（缺少字母c），导致点击事件无法正确绑定。

修复：修改ToDoItem.jsx中的props名称：

import React from "react";

function ToDoItem(props) {
  return <li onClick={props.onChecked}>{props.text}</li>;
}

export default ToDoItem;

问题2：列表项key重复警告 #

原因：用items.toString()作为key时，所有列表项的key都是整个数组的字符串形式，完全重复，违反React对key唯一性的要求。

修复：如果待办内容不重复，可直接用todoItem当key；若存在重复内容，结合数组索引生成唯一key：

{items.map((todoItem, index) => (
  <ToDoItem
    key={`${todoItem}-${index}`}
    text={todoItem}
    onChecked={deleteItem}
  />
))}

注：如果后续要对列表做排序、删除操作，索引作为key可能引发渲染异常，此时建议给每个待办项添加唯一ID（比如UUID），当前场景用内容+索引可快速解决警告。

修改后的完整代码 #

App.jsx #

import React, { useState } from "react";
import ToDoItem from "./ToDoItem";

function App() {
  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);

  function handleChange(event) {
    const newValue = event.target.value;
    setInputText(newValue);
  }

  function addItem() {
    setItems((prevItems) => {
      return [...prevItems, inputText];
    });
    setInputText("");
  }

  function deleteItem() {
    console.log("item called delete.");
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input onChange={handleChange} type="text" value={inputText} />
        <button onClick={addItem}>
          <span>Add</span>
        </button>
      </div>
      <div>
        <ul>
          {items.map((todoItem, index) => (
            <ToDoItem
              key={`${todoItem}-${index}`}
              text={todoItem}
              onChecked={deleteItem}
            />
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

ToDoItem.jsx #

import React from "react";

function ToDoItem(props) {
  return <li onClick={props.onChecked}>{props.text}</li>;
}

export default ToDoItem;

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