Chakra UI唯一的密钥支柱

Question

我正在使用@chakra/React版本1.7.2在我的React 17.0.2项目中。

这个版本的Chakra UI应该已经解决了元素中有唯一键的问题，但是当我测试代码和Chrome的控制台时，我仍然有错误：

列表中的每个孩子都应该有一个独特的“钥匙”道具。

手动添加一个唯一的“键”支柱并不能解决这个问题。有什么建议吗？

    const MyComponent = () => {
        const myArray = ['London', 'Paris'];
        
        return (
          <List>
            {myArray.map(city => (
                <ListItem key={city}>
                  <b>{city}</b>
                </ListItem>
              )
            )}
          </List>
        )
    };

Answer 1

如果您在侧有id，那么城市对象就会分配它，比如city.id等等，如果没有，您可以在返回的城市对象上分配一些唯一的字符串。唯一的办法是使用项目的索引号(这不是建议的，但您可以使用它)。见下面的代码：

      <List>
        {myArray.map((city, index) => (
            <ListItem key={index}>  <=========== (you can use city.<some_unique_id_here>)
              <b>{city}</b>
            </ListItem>
          )
        )}
      </List>