React项目API请求完成后组件列表项不显示问题如何解决

问题原因 #

• jsonCat.map的回调函数未返回JSX元素：你在map的回调中使用大括号包裹逻辑，但没有添加显式的return语句，最终生成的listItemstest数组所有项均为undefined，因此列表内容无法渲染。

解决方法 #

可以任选以下任意一种方案修改代码：

方案1：添加显式return语句 #

给map回调内的JSX添加return，同时补充列表渲染必填的key属性避免React警告：

const listItemstest = jsonCat.map((link, index) => {
  console.log(link.name);
  return (
    <View key={index}>
      <Text style={{ color: "red" }}>{link.name}</Text>
    </View>
  );
});

如果link对象存在唯一ID（如link.id），优先用ID作为key值，性能优于索引

方案2：使用箭头函数隐式返回 #

去掉map回调的大括号，改用小括号包裹JSX实现隐式返回：

const listItemstest = jsonCat.map((link, index) => (
  <View key={index}>
    <Text style={{ color: "red" }}>{link.name}</Text>
  </View>
));

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