javascript 警告：列表中的每个子元素都应该有一个唯一的“key”prop

bvhaajcl 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(154)

嘿，伙计们，我在一个应用程序中用react-native iam在一个视频之后构建了一个列表，我的代码和他完全一样，但由于某种原因，我仍然得到一个错误，告诉我列表中的每个孩子都需要一个键，即使我提供了一个。

function addGoalHandler() {
    setCourseGoals(currentCourseGoals => [...currentCourseGoals,
       {text:enteredGoalText,key: Math.random().toString()}]);
  };

<FlatList 
        data={courseGoals}
         renderItem={(itemData) => 
          { 
            return <Goalitem text={itemData.item.text}/>;
          }}
          keyExtractor={(item, index) =>
          {
            return item.id;
          }} />

这是关键的代码和列表警告：列表中的每个子元素都应该有一个唯一的“键”属性。

Check the render method of `VirtualizedList`. See https://reactjs.org/link/warning-keys for more information.
    at CellRenderer (http://192.168.1.13:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:58327:36)
    in VirtualizedList (created by FlatList)
    in FlatList (created by App)
    in RCTView (created by View)
    in View (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

这是我得到的错误，我试图找到一个解决方案，但我不能，所以我会感激一些帮助〈3
我试着去看医生或在这里寻找解决方案，但我没有找到任何帮助我的东西

JavaScript

来源：https://stackoverflow.com/questions/75845455/warning-each-child-in-a-list-should-have-a-unique-key-prop-error-in-react-nat

1条答案

按热度按时间

deyfvvtc1#

问题：

首先，您使用的是id，而item没有id，它有key，在第二部分中，您不应该使用Math.Random

解决方案：

要解决这个问题，只需像这样一起使用key和index：

<FlatList 
        data={courseGoals}
         renderItem={(itemData) => 
          { 
            return <Goalitem text={itemData.item.text}/>;
          }}
          keyExtractor={(item, index) =>
          {
            return `${item.key}-${index.toString()}`;
          }} />

希望对你有帮助：D

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 警告：列表中的每个子元素都应该有一个唯一的“key”prop

1条答案

相关问题

热门标签

最新问答