React Native列表渲染唯一key属性警告无法消除求助

嗨，我完全懂你被这个key警告烦到的心情！其实问题点很明确——你虽然在userList数组里给每个对象都定义了key字段，但渲染列表项的时候，并没有把这个key传递给对应的组件，所以React还是识别不到每个列表项的唯一标识，自然会弹出警告啦~

咱们直接来改代码解决问题：在你用map渲染<Text>组件的时候，给这个组件加上key属性，把数组里的item.key赋值给它就可以。这样React就能准确追踪每个列表项的状态变化，警告也就自动消失了。

修改后的完整代码如下：

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>
        {
          // 给循环渲染的Text组件添加key属性
          userList.map((item) => <Text key={item.key} style={styles.container}>{item.name}</Text>)
        }
      </ScrollView>
    </View>
  );
};

最后再补个小提醒：key属性一定要放在循环渲染的最外层组件上，而且尽量用稳定、唯一的标识（比如后端返回的id、你这里定义的key值），别用数组的index当key——如果列表有增删、排序操作，index会跟着变化，反而会影响React的渲染性能哦~

备注：内容来源于stack exchange，提问作者Amit Yadav