Question

我使用了带有useReducer的react挂钩创建了一个简单的列表应用程序。添加项目时，列表呈现没有问题，但是单击按钮删除项目时出现问题。什么都没发生。当我console.log时，从map函数索引传递的索引是一个类。为什么会这样？

请参阅以下StackBlitz上的代码：

https://stackblitz.com/edit/react-jxgqwc

我希望索引是listItems数组中某项的索引，而不是类。

Answer 1

这是一个React Click-Event。

将“按钮”上的点击事件更改为： onClick={() => handleItemDelete(index)}

然后它起作用。 onClick EventHandler的默认参数是click事件，控制台将其显示为Class。

请参阅：https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

Answer 2

问题是您没有将索引传递给handleItemDelete https://stackblitz.com/edit/react-siywgo?file=index.js

Answer 3

下面是涉及的两个主要代码段：

  const handleItemDelete = (index) => {
    console.log(index) //<==== why is index is a class?
    dispatch({
      type: "DELETE_ITEM",
      itemId: index,
    });
  };

      <ul>
        {items.map((item, index) => (
          <li key={index.toString()}>
            {item}{" "}
            <button
              onClick={handleItemDelete}
            >
              X
            </button>
          </li>
        ))}
      </ul>

发生onClick事件时，传递给它的东西将是event对象。如果需要索引，则需要类似onClick={()=>handleItemDelete(index)}的文件。

这是您代码的修改版本：

https://stackblitz.com/edit/react-tptvnx?file=index.js

为什么在React Hooks中使用map函数，索引是渲染列表中的A类？

3 个答案: