ReactJS 从 axios 获取数据并传递给另一个组件

Question

我有一个Info在此路径中调用的组件：compontent\Agent\Info并从中data获取：axioscomponentDidMountasync componentDidMount() {        let data = await API.getData();        this.setState({            result: data.success        });    }我添加data到这里state.result，this.state.result.unread_message现在我想传递this.state.result.unread_message给另一个名为 的组件SideBar，以避免双重请求。像这样：template\SideBar代码：<Label>{this.props.unread_message}</Label>这些不是子组件或父组件，我如何data从一个组件中的 axios 传递到另一个组件？我尝试并遵循了这个答案，但它没有按预期工作，并且还在信息中呈现整个侧边栏！

Answer 1

你可以使用 react's context API's。在此处阅读更多相关信息。

Answer 2

这个问题有很多答案，有些更复杂，有些更基于标准，有些人会说“永远不要这样做”。

一种选择：在您的侧边栏组件中，创建一个全局函数，window.onDataUpdate = (result) => { this.setState({result}) }，就像一个例子。然后，当您在其他任何地方获取更新的数据时，您可以调用window.onDataUpdate(result). 很多人会认为这个答案是不可接受的，因为它使用了全局函数。根据您项目的规模和复杂性，也许这是真的，这不是正确的方法。如果这是一个真正简单的小项目，我可能会通过它。

另一种选择是将对象存储在另一个文件中，您可以将其导入两个文件中，从而允许您注册侦听器并触发更新。因此，当您的 Info 组件获得更新的结果时，它可以调用该其他对象上的“触发器”函数，进而调用所有已注册的回调侦听器。

甚至使用更新数据触发的普通默认 Javascript 事件。按照这里的指南

对于这种场景，React 世界中的一个常见答案是也使用 Redux 存储状态。这可能过于复杂，特别是如果这是您唯一使用 redux 的事情。