React Native：遍历对象循环无法渲染组件问题求助

我尝试遍历对象，为每个key渲染对应组件，代码如下：

export const BeachDetailsModal = (beachData) => {
  const details = {
    zAccess: beachData.zAccess,
  };
  Object.values(beachData).forEach((value, index) => {
    let key = Object.keys(beachData)[index];

    if (value === "TRUE") {
      details[key] = value;
    }
  });
  const RenderedItem = () => {
    return (
      <View style={styles.item}>
        <View style={styles.icon}>
          <Text style={{ fontSize: 26 }}>X</Text>
        </View>
        <View style={styles.itemHeader}>
          <Text style={styles.headerText}>Insert Name Here</Text>
        </View>
      </View>
    );
  };
  return (
    <View style={styles.outside}>
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            
            <Text style={styles.pageHeaderText}>{beachData.name}</Text>
            {Object.entries(details).forEach((entry) => {
              const [key, value] = entry;
              console.log(key, value);
              <RenderedItem />;
            })}
          </View>
        </ScrollView>
      </View>
      
    </View>
  );
};

页面未渲染任何组件，但循环内的console.log能正常输出对象所有项，说明循环逻辑没问题。测试以下代码时，组件能正常渲染：

{beachData.zAccess === "Hike" && <RenderedItem />} 

组件本身无问题，为什么循环无法渲染组件？

原因分析 #

问题出在forEach方法上：

• forEach没有返回值，它只是遍历数组执行回调，不会生成新的数组。React在JSX中需要接收可渲染的元素数组来渲染内容，而forEach执行后返回undefined，所以页面上没有任何输出。
• 虽然你在回调里写了<RenderedItem />，但这个元素没有被收集并返回给JSX。

解决方案 #

把forEach换成map方法，map会遍历数组并返回一个新的元素数组，正好符合React渲染的要求：

修正后的核心代码部分：

{Object.entries(details).map((entry) => {
  const [key, value] = entry;
  console.log(key, value);
  // 必须给每个列表项添加唯一的key属性，这是React列表渲染的强制要求
  return <RenderedItem key={key} />;
})}

另外，你构建details对象的代码也可以优化得更简洁，不用forEach：

// 保留zAccess，同时筛选出值为"TRUE"的其他属性
const details = {
  zAccess: beachData.zAccess,
  ...Object.fromEntries(
    Object.entries(beachData).filter(([key, value]) => value === "TRUE" && key !== "zAccess")
  )
};

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