Проп не обновляется при изменении состояния

Question

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

Вот мой код:

class App extends Component {
  state = {
    contract: null,
    ethereum: null,
    user: null
  };

  componentDidMount() {
    let ethereum = window.ethereum || null;
    this.setState({ ethereum });
  }

  getContainerClasses() {
    let classes = "container";
    classes += this.state.ethereum === null ? " invisible" : "";
    return classes;
  }

  render() {
    return (
      <React.Fragment>
        <Nav />
        <div className={this.getContainerClasses()}>
          <Intro ethereum={this.state.ethereum} />
          <Load />
          <Deploy />
        </div>
      </React.Fragment>
    );
  }
}

class Intro extends Component {

  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return (
      <React.Fragment>
        ...
      </React.Fragment>
    );
  }

  handleClick() {
    console.log(this.props.ethereum);
  }

  getContainerClasses() {
    let classes = "container";
    classes += this.props.ethereum !== null ? "  " : "";
    return classes;
  }
}

Как вы можете видеть в моем примере, я пытаюсь войти this.props.ethereum по нажатию кнопки. К сожалению, он не выходит из данных, которые доступны в App компонент (отображается в Chrome React Tools).

Изменить: я неправильно прочитал свои журналы. Реквизит обновляется, но getContainerClasses() не увольняется, когда состояние меняется.

По сути, я пытаюсь скрыть содержимое, пока данные еще не загружены, и раскрыть его, как только оно будет.

Answer 1

Вероятно, в тот момент, когда ваш компонент монтируется windows.ethereum еще не определено. Кажется, что ethereum устанавливается асинхронно, поэтому ваш компонент React не знает, когда это произойдет. Вы должны добавить слушателя событий, чтобы реагировать, когда ethereum определено. Вы можете увидеть правильное значение в инструментах разработчика, потому что там у вас есть доступ к ссылке на объект, поэтому вы всегда видите актуальное значение в инструментах разработчика.

Возможно, вы используете некоторые ethereum lib, который должен включать некоторый метод API, позволяющий реагировать на момент, когда все готово и инициализировано. Ниже приведен псевдокод, показывающий, как вы можете достичь этого:

 componentDidMount() {
    ethereum.addEventListener('ready', (ethereumObject) => this.setState({ethereum: ethereumObject}))
 }