重复渲染的MainFurnaceView组件意外共享状态问题求助

看起来你遇到的核心问题是React组件实例被意外复用，再加上状态初始化时的引用共享问题，导致两个熔炉组件的状态混乱。咱们一步步拆解解决：

核心原因排查 #

从日志和代码来看：

• 组件初始化时furnace属性是正确的，但父组件重渲染（或异步操作触发 setState）后，两个组件都显示preheat的数据。
• 你在MainScreen中渲染了两个同类型的MainFurnaceView但没有添加唯一key属性——这会让React的diff算法误认为两个组件是同一个，从而复用实例，导致第一个组件的props被覆盖为preheat。
• furnacePieces的初始化方式存在引用共享风险：Object.assign(pieces.forge, {})会直接返回全局的pieces.forge对象（而非新对象），如果全局对象被修改，所有组件实例都会受影响。

逐步解决方案 #

1. 添加唯一key属性（最关键） #

给每个MainFurnaceView添加唯一key，让React能明确区分两个独立组件实例，避免复用：

// MainScreen代码修改
<MainFurnaceView 
  key="forge"
  furnace="forge"/>
<MainFurnaceView 
  key="preheat"
  furnace="preheat"/>

2. 修复状态初始化的引用共享问题 #

将全局pieces对象深拷贝为组件私有对象，彻底断开引用：

// MainFurnaceView的constructor修改
this.state = {
  // 使用扩展运算符创建新对象，替代原Object.assign写法
  furnacePieces: this.props.furnace === "forge" 
    ? {...pieces.forge} 
    : {...pieces.preheat},
};

如果pieces是多层嵌套对象，建议使用JSON.parse(JSON.stringify())或深拷贝工具，确保完全独立。

3. 异步操作中锁定当前props #

在getData中提前解构并保存当前props，避免异步操作完成时props已变化（比如组件被复用或卸载）：

getData = async () => {
  // 先保存当前的furnace属性，避免后续props变化影响逻辑
  const { furnace } = this.props;
  try {
    let furnaceData;
    if (furnace === "forge")
      furnaceData = await AsyncStorage.getItem(consts.KEY_FORGE_DIMENSIONS);
    else
      furnaceData = await AsyncStorage.getItem(consts.KEY_PREHEAT_DIMENSIONS);
    
    furnaceData = JSON.parse(furnaceData);
    console.log("getData: ", furnace, furnaceData);
    
    if (typeof furnaceData[0].r === "number") {
      this.setState({
        furnaceRows: furnaceData[0].r,
        furnaceCols: furnaceData[0].c,
        furnaceHeights: furnaceData[0].h,
      });
    } else {
      console.warn("not found");
      this.setState({
        furnaceRows: 3,
        furnaceCols: 3,
        furnaceHeights: 1,
      });
    }
  } catch (e) {
    console.log(e);
  }
};

4. 可选：添加props变化时的状态同步 #

如果未来需要动态修改furnace属性，可以通过componentDidUpdate同步状态：

componentDidUpdate(prevProps) {
  if (prevProps.furnace !== this.props.furnace) {
    // 更新furnacePieces
    const newFurnacePieces = this.props.furnace === "forge" 
      ? {...pieces.forge} 
      : {...pieces.preheat};
    this.setState({ furnacePieces: newFurnacePieces });
    // 重新获取对应熔炉的数据
    this.getData();
  }
}

验证效果 #

做完以上修改后，重新运行项目：

• 两个组件的初始化和异步数据获取会完全独立
• 父组件重渲染（比如打开/关闭模态框）时，两个组件会保持各自的furnace属性和对应数据

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