0

我正在开发一个需要异步获取一些数据并将状态保存在父组件中但还将数据引用传递给子组件的应用程序。问题是一旦在状态中加载数据，道具就不会更新到新状态。我怎样才能使它在父状态更改时自动更新道具？

这是我的代码：

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 工具中可见）。

编辑： 我误读了我的日志。道具正在更新，但getContainerClasses()状态更改时不会触发。

基本上我想要做的是在数据尚未加载时隐藏内容并尽快显示它。

4

1 回答 1

1

可能您的组件安装的那一刻windows.ethereum尚未定义。似乎ethereum是以异步方式设置的，因此您的 React 组件不知道它何时发生。您必须添加一些事件侦听器才能在ethereum定义时做出反应。您可以在开发工具中看到正确的值，因为您可以访问对象引用，因此您始终可以在开发工具中看到最新的值。

可能您使用了一些ethereum库，其中应该包含一些 API 方法，允许在一切准备就绪并初始化时做出反应。下面是psedu代码，展示了如何实现它：

 componentDidMount() {
    ethereum.addEventListener('ready', (ethereumObject) => this.setState({ethereum: ethereumObject}))
 }
于 2019-02-25T18:18:00.660 回答