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工具中可见）中可访问的数据。

编辑： 我看错了日志。道具正在更新，但是状态更改时getContainerClasses()不会被解雇。

基本上，我想做的是在尚未加载数据的情况下隐藏内容，并尽快将其显示出来。

Answer 1

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

可能您使用了ethereum库，该库应包含一些API方法，以便在一切准备就绪并初始化后立即作出反应。以下是psedu代码，显示了如何实现：

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

状态更改时道具不会更新

1 个答案: