发现一个bug,react，事件绑定会删除你希望删除目标的上一个

//这是UI组件，只负责渲染页面，不负责逻辑处理
import React, { Component } from 'react';
import "antd/dist/antd.css";
import { Input, Button, List, Typography, Tag } from "antd";


const ToDoListUI = (props) => {
  return (
    <div style={{ marginTop: "10px" }}>
      <Input
        value={props.inputValue}
        placeholder="请输入电影名字"
        style={{ width: "300px" }}
        onChange={props.handleInputChange}
      />
      <Button onClick={props.handleButtonClick} type="primary">
        提交
      </Button>
      <br />
      <Tag color="lime">想看的电影愿望清单:</Tag>
      <List
        style={{ marginTop: "10px", width: "300px" }}
        bordered
        dataSource={props.list}
        renderItem={(item, index) => (
          <List.Item
            onClick={() => {
              props.handleItemDelete(index);
            }}
          >
            {item}
          </List.Item>
        )}
      />
    </div>
  );
}

//这是无状态组件：（无状态组件就是一个函数） 可以改用const定义,如上：
// class ToDoListUI extends Component {
//     render() {
//         return (
//           <div style={{ marginTop: "10px" }}>
//             <Input
//               value={this.props.inputValue}
//               placeholder="请输入电影名字"
//               style={{ width: "300px" }}
//               onChange={this.props.handleInputChange}
//             />
//             <Button onClick={this.props.handleButtonClick} type="primary">
//               提交
//             </Button>
//             <br />
//             <Tag color="lime">想看的电影愿望清单:</Tag>
//             <List
//               style={{ marginTop: "10px", width: "300px" }}
//               bordered
//               dataSource={this.props.list}
//               renderItem={(item, index) => (
//                 <List.Item
//                   onClick={(index) => {this.props.handleItemDelete(index)}}
//                 >
//                   {item}
//                 </List.Item>
//               )}
//             />
//           </div>
//         );
//     }
// }

export default ToDoListUI;

<List.Item
            onClick={() => {
              props.handleItemDelete(index);
            }}
          >

正确的核心代码，如上：

 

 

 

如果出现错误的话，就下面这样子

<List.Item
            onClick={(index) => {
              props.handleItemDelete(index);
            }}
          >

 

 

 

原理暂时没深究，感觉就是index参数不是List.Item组件的，而是他父亲组件的，所以直接写()就行，没必要传递参数index