在间接子级/父级之间反应发送数据

Question

我设置了以下“父母/孩子”。我以这种方式进行了设置，以使其更加井井有条，更加轻松，尽管现在我开始明白为什么没有Redux不可能做某些事情。

以下是我的组件设置：

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

然后，我必须将此数据发送到Daily组件，以便它可以显示数据。将AccountSearch组件中的字段的值发送到其父AppBarPanel，然后发送到其父Skeleton，然后更新Skeleton中的数据状态，并将数据发送到Content，再发送到其子Router，然后更正页面，这比卷积要复杂得多。案例每天，以便显示数据。

如何在这里简化生活？

下面是我拥有的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);
  })

Answer 1

反应全部是关于组件层次结构中向下流动的数据的，这意味着不应出现水平数据，如果您面临需要水平传递数据的情况，我建议您重新考虑一下组件的结构。您可以尝试以下几种方法：

• 使用redux ou集中应用程序的状态
• 将组件包装在分发数据的父组件上
• 使用context API

Answer 2

根据我的经验，在很多情况下，您需要在树的不同分支中的组件之间进行数据交换的水平要求（如果没有，那么将永远不会发明redux）。

有很多方法可以实现这一目标：

1. Redux -大多数人使用的东西，但需要很多样板和复杂性。
2. 上下文-Facebook针对您想要做什么的内置解决方案
3. 事件-本机JavaScript方式

您可以使用pubsub之类的库或本机js事件

例如在接收组件中：

componentDidMount() {
   document.addEventListener("dataArrived", this.handleData)
}

和其他组件中的

// on data arrived
var event = new CustomEvent('dataArrived', { detail: mydata });
document.dispatchEvent(event);

1. 使用全局变量-附加到全局窗口（不推荐）

   getDataApi（）。then（data => window.data = data）

收听组件：

setInterval(() => if (window.data) { this.setState(window.data) }, 1000);