使用 React 道具处理按键

Question

首先，我将 JSX 直接传递给数据数组常量。所以现在我尝试为每个项目分配一个不同的键，因为 console.log 总是返回相同的键，无论我点击哪个项目。现在我重写了代码并创建了另一个被读入常量的组件。不幸的是，当我点击条目时，我只收到消息“未定义”。所以密钥没有通过。显示数字和时间。

const ListItem = (props) => {
  return (
    <li class="date" onClick={() => handleDel(props.index)}  key={props.index}>
      <div class="number">
        <a href="tel:PHONE_NUM">{props.number}</a>
      </div>
        <div class="time">
        {props.time}
        </div>
    </li>
  )
}

for (var index in data) {
  i++;
  dataarray.push(<ListItem key={index} number={data[index]['number']} time={data[index]['time']} />)
}
...

return (
          <ul class="list">{daten}</ul>
      )

Answer 1

如果使用 in 语法执行 for 循环，则不必执行 i++。你的代码很乱，我假设 index 和 i 是同一个变量，但你重命名了它。如果是这样，那么注释掉 i++ 将修复它。在 in.

中使用 for 循环时，索引会自动递增

你的问题集中在 onClick delete 返回 undefined 那是因为你没有将 index 道具传递给 ListItem

dataarray.push(
      <ListItem
        index={index} // adding this line fixes it
        key={index}
        number={data[index]["number"]}
        time={data[index]["time"]}
      />
    );

看看这个 codesandbox 示例 https://codesandbox.io/s/boring-williams-msfgm?file=/src/App.js:583-746

使用 React 道具处理按键

Handling keys with react props

loops

key

reactjs