React Native中如何修复‘列表子项需有唯一key属性’警告？

你的问题出在key属性的位置不对：你把key加在了TargetCon组件上，但它外面包裹了<>（短语法Fragment），而React要求map返回的每一项最外层元素必须有唯一key，短语法Fragment不支持设置key，所以React根本没识别到你加的key，警告自然不会消失。

有两种解决方式：

方式一：去掉不必要的Fragment #

如果你的TargetCon已经是单个根元素，完全不需要额外包裹Fragment，直接返回它即可：

const TargetFarm = () => {
  const {farms} = useSelector((state: RootState) => state.post);

  return (
    <SeCotainer platform={tablet}>
      {farms.map(v => {
        return (
          <TargetCon key={v.placeId.toString()}>
            <TargetTxt platform={tablet}>{v.name}</TargetTxt>
          </TargetCon>
        );
      })}
    </SeCotainer>
  );
};

方式二：改用完整Fragment语法（如果确实需要Fragment） #

如果因为布局或结构必须用Fragment，就不能用短语法<>，要写完整的<React.Fragment>并把key设置在它上面：

import React from 'react'; // 确保导入React

const TargetFarm = () => {
  const {farms} = useSelector((state: RootState) => state.post);

  return (
    <SeCotainer platform={tablet}>
      {farms.map(v => {
        return (
          <React.Fragment key={v.placeId.toString()}>
            <TargetCon>
              <TargetTxt platform={tablet}>{v.name}</TargetTxt>
            </TargetCon>
          </React.Fragment>
        );
      })}
    </SeCotainer>
  );
};

这样React就能识别到每个列表项的唯一key，警告就会消失了。

内容的提问来源于stack exchange，提问作者user19476497