React Native接口返回的数据无法在组件中渲染显示问题

问题原因 #

• 核心问题是你使用了forEach做遍历：forEach方法仅执行遍历逻辑没有返回值，回调内部写的<Text>组件没有被返回给渲染层，因此无法在屏幕上显示，console.log属于遍历执行的逻辑所以可以正常输出。
• 存在潜在报错风险：你初始化rich的默认值为空数组[]，但接口返回的是包含data字段的对象，在请求完成前rich.data为undefined，直接遍历会触发报错。

解决方案 #

将渲染部分的forEach替换为map方法，map会返回包含所有<Text>组件的数组，React可以直接渲染该数组内的元素，修改后代码如下：

<View> {
  rich?.data?.map(item => {
    console.log(item.author);
    // 这里要显式return组件
    return <Text key={item.url /* 用接口返回的唯一字段当key，比如id、url都可以 */}>{`data: ${item.author}`}</Text>
  }) || []
}
</View>

关键修改点说明： #

• 用map替代forEach，同时在回调中显式return需要渲染的<Text>组件，如果你不想写return可以去掉回调的大括号用隐式返回：

  rich?.data?.map(item => <Text key={item.url}>{`data: ${item.author}`}</Text>)
  

• 给每个列表项添加唯一key属性，避免React抛出列表渲染告警。
• 用可选链?.做属性访问保护，配合|| []做兜底，避免请求完成前数据不存在导致的报错。
• 建议调整rich的初始值为{}，和接口返回的结构保持一致，进一步降低类型不匹配的风险：

  const [rich, setData] = useState({});
  

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