Question

我是新来的反应者，这更多是一种概念性问题，而不是特定的编程。

我有一个主要组成部分，其中有3个子组成部分。称他们为A, B, C。 A是图形，B是图像，C是一组单选按钮（X，Y，Z）。有一个与C有关的状态，其默认值为{buttonSelected: "Y"}。

在加载主要组件时，会从prepareData(this.state.buttonSelected)中调用函数render()。该函数将准备在图形和图像中显示所需的所有数据，然后将数据填充到对象上并返回该对象。使用此返回的对象创建了主要组件return()内的所有图形和图像，并且该组件成功加载。

现在，当我再次单击单选按钮X时，将以prepareData(this.state.buttonSelected)中正确的X值调用render()，它将返回填充有图形和图像正确数据的对象。但是图形和图像不会用新值重新渲染。

这是因为创建图形和图像的数据未处于状态吗？是否需要重新渲染的每个部分都应与props or state关联，并且不重新渲染从另一状态派生的数据？

编辑：添加了伪代码

const prepareData = buttonSelected => {
   <chart data and image preparation based on buttonSelected >
   object.chartdata, object.imagedata = <prepared data>
   return object
}

class MainComponent extends Component {
   constructor(){
      this.state = {buttonSelected: "Y"}
   }

onButtonClick(c){ 
   this.setState({buttonSelected: c})
}
render(){ 
   returnData = prepareData(this.state.buttonSelected)
   return (
   <JSX using retrunData>
   <...... onClick ={() => this.onButtonClick("Y") >
   <Chart data = {returnData.chartdata} />
   <Image source={returnData.imagedata} />

}

Answer 1

您的假设是正确的。

更改组件状态时将触发渲染。状态可以从道具更改或直接setState更改更改。之后，根据更新的状态做出反应，决定是否重新渲染。

在您这种情况下，prepareData调用后道具和状态没有改变。

React派生组件不会在状态更改时更新

1 个答案: