проп не обновляется при изменении состояния - PullRequest
Новая
       50

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

0 голосов
/ 25 февраля 2019

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

Вот мой код: 

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() не срабатывает при изменении состояния.

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

1 Ответ

0 голосов
/ 25 февраля 2019

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

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

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