Question

问题是两个视图（相同组件）加载相同的信息（每个视图是一个炉子，MainFurnaceView），它们应该加载不同的信息一。 第一次渲染（可能会出现几毫秒的时间）它们渲染了不同的信息，所以还可以，但是后来在第二次不需要的渲染之后，两个视图都显示了相同的信息。我认为他们正在分享他们之间的状态。

我在MainFurnaceView中两次渲染了一个MainScreen元素，唯一赋予我的属性是furnace，在第一个视图furnace={'forge'}上，第二个furnace={'preheat'}。由于这个属性，他们应该加载其他信息。

在MainFurnaceView上，它正确地在构造器中记录了炉子支撑物，并且还从AsyncStorage中获取了井喷信息（在构造器上调用也）。在渲染时，首先，每个视图都会记录所需炉子的信息，但随后会在两个视图上加载并记录第二个炉子的信息。

代码：
MainScreen

<MainFurnaceView
 //Tried with and without both onRef 
 //onRef={(ref) => (this.Option = ref)}              
 furnace={"forge"}/>
<MainFurnaceView
 //onRef={(ref) => (this.Option = ref)}
 furnace={"preheat"}/>

MainFurnaceView

constructor(props) {
super(props);

console.log('Constructor:', this.props.furnace);//Logs well
this.state = {
  //Pieces to use at furnace view, tried with Object.assign and directly without it
  furnacePieces:
    this.props.furnace === "forge"
      ? Object.assign(pieces.forge, {})
      : Object.assign(pieces.preheat, {}),
};
this.getData()/*Call to AsyncStorage here*/;}

getData = async () => {
//Get data (data) from key and save it as state
try {
  let furnace;
  if (this.props.furnace === "forge")
    furnace = await AsyncStorage.getItem(consts.KEY_FORGE_DIMENSIONS);
  else furnace = await AsyncStorage.getItem(consts.KEY_PREHEAT_DIMENSIONS);

  furnace = JSON.parse(furnace);
  console.log("getData: ", this.props.furnace, furnace);
  if (typeof furnace[0].r === "number") {
    this.setState({
      furnaceRows: furnace[0].r,
      furnaceCols: furnace[0].c,
      furnaceHeights: furnace[0].h,
    });
  } else {
    console.warn("not found");
    this.setState({
      furnaceRows: 3,
      furnaceCols: 3,
      furnaceHeights: 1,
    });
  }
} catch (e) {
  // error reading value
  console.log(e);
}

};

我在渲染器上调用console.log('Render: ', this.props.furnace)，并在那里登录属性炉。

日志：

Constructor: forge
Render:  forge
Constructor: preheat
Render:  preheat
getData: forge Array [
  Object {
    "c": 4,
    "h": 1,
    "r": 6,
  },
]
Render:  preheat
getData: preheat Array [
  Object {
    "c": 4,
    "h": 1,
    "r": 4,
  },
]
Render:  preheat

我对此日志的理解是创建并渲染了第一个视图，然后创建并渲染了第二个视图，但是后来都将属性熔炉重新加载为“预热”，而不是一个带有“伪造”，另一个带有“预热”。

更新：
如果我没有在构造函数上调用getData，则不会重新渲染视图，因此每个炉子的信息都很好。现在的问题是，我需要从AsyncStorage获取这些尺寸，并知道如何不这样做，因为获取该信息会生成一个新的渲染并更改了道具炉。
但是
如果我做出任何重新渲染两个mainScreen的{{1}}的操作（例如，打开另一个模态并关闭它），它将在两个视图上呈现“预热”信息。

两次渲染的组件共享状态，因此不应共享状态

0 个答案: