Question

，感谢您的协助。

我有一个父子组件设置，其中父项的状态作为道具传递给子项，其中一项也是onClick事件处理程序，其按钮位于子项中，但在父项中处理。当按下onclick时，它将在父对象中引发该handle事件，父对象将在其中调用api以获取一些数据。完成此操作后，需要通知孩子。

我的问题是：其他除了包括父母会设置的另一个道具-会让孩子知道父母已经完工了，我有什么选择？（注意：我不使用Redux，希望不要这样做）。

Promise可以在这里工作（请参见下面的代码），还是Pro推荐的实现。（我对道具的担心是我已经将6岁左右的孩子传递给孩子了，我不想继续增加，尤其是像这样的东西）

父母：

private handleOnclick = () => {
        this.apiService.getData() ...
 }

<Child onClick={this.handleOnclick} ...

孩子：

子级具有内部的handleButtonOnclick函数，该函数调用父级。

   private handleButtonOnclick = () => {
         this.props.handleOnclick().then( () => {
         **WHEN COMPLETE TAKE SOME ACTION.**
    });
   }
   <Button onClick={() => this.handleOnclick()} >Click Me</Button>

如您所见，我正在尝试弄清楚如何在父级完成处理后（不使用props或某些状态管理库）将通知客户端

谢谢！

Answer 1

ComponentDidUpdate将让您查看道具是否已更改：

父母：

constructor(props) {
  super(props);
  this.state = {
    gotData: false;
  }
}

handleOnClick {
  this.setState({ gotData: false });
  this.apiService.getData(() => {
    // ...
    this.setState({ gotData: true });
  }
}

// render()
<Child onClick={handleOnClick} gotData={this.state.gotData} />

孩子：

componentDidUpdate(prevProps) {
  if (props.gotData && props.gotData !== prevProps.gotData) {
    alert('data came in! (child)');
  }
}

假设您的API请求不是立即发送的，或者不是太快，则首先将gotData设置为false。然后，当API响应返回时，gotData设置为true，并且与先前的gotData不同，从而触发了alert代码。

在现实/大型应用程序中，通常使用来自网络的响应，而不是getData，其形式为id或Redux状态更新，但这应适用于您的情况。

希望现在更加清楚！

反应，当处理完成时，父母通知孩子

1 个答案: