时间戳

首页 > 解决方案 > 反应在间接孩子/父母之间发送数据

reactjs - 反应在间接孩子/父母之间发送数据

问题描述

我有以下父/子设置。我这样设置它是为了让它更有条理和更容易，尽管现在我开始明白为什么没有 Redux 就不可能做一些事情。

以下是我的组件设置： 在此处输入图像描述

帐户搜索中有一个搜索字段，因此当用户填写完毕时，我需要触发 API 调用，这没什么大不了的。然后我获取数据并使状态中的数据等于我通过 API 提取的数据。 { isLoaded: true, api: data.data }

然后我必须将此数据发送到 Daily 组件，以便它可以显示数据。将 AccountSearch 组件中的字段值发送到它的父 AppBarPanel 然后发送到他的父骨架，然后更新骨架中的数据状态并将数据发送到 Content 然后发送到它的子路由器，然后再发送到正确的页面，这要复杂得多。 case Daily 显示数据。

我怎样才能在这里简化我的生活？

以下是我的 API 调用

this.apiService
  .callApi("A", "B", "C")
  .then(data => {
    this.setState({ isLoaded: true, api: data.data });
    toastr.success('Api returned data successfully.');
  })
  .catch(error => {
    toastr.error(error);
  })

标签： reactjs

解决方案

React 是关于在组件的层次结构中向下流动的数据，这意味着不应该发生横向数据，如果您面临需要横向传递数据的情况，我建议您重新考虑组件的结构。您可以尝试以下几件事：

  • 使用 redux 或类似的方式集中应用程序的状态
  • 将组件包装在分发数据的父组件上
  • 使用上下文 API

推荐阅读