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

Question

我在此路径中有一个名为 Info 的组件：

compontent\Agent\Info

并从axios 中的componentDidMount 中获取data：

async 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，但它没有按预期工作，并且还在信息中呈现整个侧边栏！

Answer 1

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

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

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

甚至使用更新数据触发的普通默认 Javascript 事件。 following the guide here

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

Answer 2

您可以为此使用 react 的 context API's。阅读更多关于它的信息here。