React Native中如何展示传递至另一页面的对象形式状态内的多组StatusBoxComponent

咱们先来拆解下你遇到的问题核心：你原本把React元素存在数组状态inState里，当前页面渲染没问题，但通过Object.assign({}, inState)把数组转成了带索引键的普通对象传递给ChartScreen，而React无法直接渲染这种对象类型的内容，这就是报错的根源。

快速修复方案 #

方案1：直接传递数组（最简便） #

React Navigation完全支持传递数组参数，你根本不需要把数组转成对象。修改导航代码即可：

props.navigation.navigate(ChartScreen, {
  inState: inState, // 直接传递原数组，去掉多余的Object.assign
});

然后在ChartScreen里直接渲染数组：

const ChartScreen = (props: any) => {
  const {inState} = props.route.params;

  return (
    <View>
      {inState}
    </View>
  );
};

方案2：如果必须传递对象（不推荐，但可临时解决） #

如果出于特殊原因你一定要传递对象形式的数据，那在ChartScreen里把对象转回数组再渲染：

const ChartScreen = (props: any) => {
  const {inState} = props.route.params;
  // 提取对象的所有值，转为可渲染的数组
  const renderableItems = Object.values(inState);

  return (
    <View>
      {renderableItems}
    </View>
  );
};

更优的实践建议：存储数据而非React元素 #

虽然上面的方案能解决问题，但非常不推荐在状态里存储React元素——这违背了React状态管理的最佳实践。状态应该存储的是数据，而不是UI元素本身，这么做的好处包括：

• 状态更纯净，便于调试、维护和回溯
• 数据传递更可靠，不会有React元素的引用或序列化隐患
• 可以在任意页面根据数据灵活生成UI，扩展性更强

具体改造步骤如下：

1. 修改状态为存储数据数组：

// 初始化空数组，存储每个状态项的核心数据
const [statusData, setStatusData] = useState([]);

const breakOutClick = () => {
  // 使用函数式更新确保获取最新状态
  setStatusData(prev => [
    ...prev,
    {
      status: 'Break-Out',
      time: time,
      ImageConfigIconCheckOut: true
    }
  ]);
};

const breakInClick = () => {
  setStatusData(prev => [
    ...prev,
    {
      status: 'Break-In',
      time: time,
      ImageConfigIconCheckOut: true
    }
  ]);
};

2. 在原页面渲染时根据数据生成组件：

<View>
  {statusData.map((item, index) => (
    <StatusBoxComponent 
      key={index} // 建议用唯一ID（如时间戳、UUID）替换index，避免渲染异常
      {...item} // 解构传递所有属性
    />
  ))}
</View>

3. 传递数据数组到ChartScreen：

props.navigation.navigate(ChartScreen, {
  statusData: statusData,
});

4. 在ChartScreen里根据数据渲染组件：

const ChartScreen = (props: any) => {
  const {statusData} = props.route.params;

  return (
    <View>
      {statusData.map((item, index) => (
        <StatusBoxComponent 
          key={index}
          {...item}
        />
      ))}
    </View>
  );
};

这样改造后，你的状态管理逻辑会更清晰，后续修改UI或扩展功能也会更顺畅。

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