主页 / coding / 问题 / 78969589
Accepted
Amit Yadav
Asked: 2024-09-10 20:55:02 +0800 CST

React Native 警告：列表中的每个子项都应具有唯一的“key”属性。在 JavaScript 映射函数中 [重复]

  • 772

我无法通过这个警告摆脱它

警告：列表中的每个子项都应该有一个唯一的“关键”道具。

完整代码如下：

const App = () => {

  const userList = [
    {
      key: 1,
      name: "Amit"
    },
    {
      key: 2,
      name: "Ajit"
    },
    {
      key: 3,
      name: "Avinash"
    },
  ];

  return (
    <View>
      <Text style={{ textAlign: 'center' }}>Hello List</Text>
      <ScrollView>
        {
          userList.map((item) => <Text style={styles.container}>{item.name}</Text>)
        }
      </ScrollView>
    </View>
  );
};
react-native

2 个回答

  1. 警告中告诉了您必须做什么。

    向地图中返回的内容添加一个key属性<Text。例如，

      return (
    <View>
      <Text style={{ textAlign: 'center' }}>Hello List</Text>
      <ScrollView>
        {
          userList.map((item) => <Text key={item.name} style={styles.container}>{item.name}</Text>)
        }
      </ScrollView>
    </View>
  );
    • 1
  2. Best Answer

    为了避免出现此警告，您需要将 (unique)key属性传递给每个列表项。您可以按以下方式修改代码以避免出现警告：

    {
  userList.map((item) => <Text key={item.key} style={styles.container}>{item.name}</Text>)
}

    确保不要使用名称或任何不能保证唯一的字段。如果列表中的两个项目具有相同的名称，React 将无法唯一地标识它们。这可能会导致渲染问题或更新列表时出现意外行为。

    • 1

相关问题