Как использовать состояние в динамически создаваемых компонентах во время выполнения для React Native

Question

Я создал функцию, которая создает и создает дерево компонентов во время выполнения. Это дерево каждый раз отличается в зависимости от некоторых параметров, поступающих от веб-службы. Я могу успешно отобразить дерево, но значения состояния не обновляются при его изменении.

Например:

export default class App extends React.Component {

  state={
    loading:true,
  }

  componentDidMount() {
    this.buildComponent();
  }

  buildComponent() {
    var comp = <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
      <Text>{this.state.name}</Text>
      <Button title="Change State" onPress={()=>this.setState({name:"Changed"})} />
    </View>
    this.comp = comp;
    this.setState({loading:false});
  }

  render() {
    if (this.state.loading) {
      return <Text style={{alignSelf:'center',marginTop:50}}>Loading ...</Text>
    }
    return (
     this.comp
    );
  }

}

В этом примере кода я знаю это это не лучшая практика, чтобы делать это таким образом, но у меня просто есть вариант использования, в котором мне нужно кодировать его таким образом.

Как вы видите в примере, когда я нажимаю на кнопку, я хочу имя состояния, которое должно быть изменено на «Изменено», но оно не изменяется.

Похоже, что React не отображает state.name внутри текста и отображает его после его изменения.

Я не хочу помещать buildComponent внутри метода render, потому что buildComponent выполняет много дорогих вычислений, и каждый раз его вызов будет сильно влиять на производительность, поэтому я хотел один раз собрать компоненты и отобразить их, но значения состояний вообще не обновляются.

Заранее благодарим за ваш ценный вклад.

Answer 1

вы используете componentDidMount, так что комп отображает только один раз, когда состояние обновляется, не вызывается componentDidMount, поэтому, если вы хотите повторно выполнить компоновку снова, вместо этого определите componentDidUpdate

 componentDidUpdate() {
    this.buildComponent();
  }