javascript - 在 React 中更新两个组件之间的数据

Question

我是 React 新手，我不知道最好的方法是什么。

我有一个汽车列表，单击每一行时，它应该显示该汽车的整页详细信息的幻灯片。

我的代码结构是:

我有一个渲染两个组件的应用程序。汽车列表和汽车详细信息。汽车详细信息最初是隐藏的。我在应用程序中渲染 carDetails 的原因是因为它是一个巨大的修复模板，因此我想在加载应用程序时渲染一次，并且仅在单击每一行时更新其数据。

CarList 还呈现 CarRow 组件，这很好。 现在我的问题是我在 CarRow 组件上有一个 getDetails 函数，它正在调用以根据汽车 ID 获取详细信息。如何更新 carDetails 组件数据？我用了 this.setState({itemDetails:data}); 但似乎 carRow 的状态与 carDetails 中的状态引用不同。

有什么帮助吗？

Answer 1

这是一个基本问题，为了尝试解决，我们投入了大量的思考和工时。这个问题可能无法在 StackOverflow 的帖子中得到解答，除非是在表面上。它也不是以 React 为中心的。无论您使用什么框架，这都是大多数应用程序中存在的问题。

既然您在 React 的上下文中询问，您可能会考虑阅读 flux ，这是与 React 结合的单向数据流思想的事实上的实现。然而，该架构绝不是“最好的”。就像其他事物一样，它也有优点和缺点。

有些人不喜欢 Flux 提出的全局“事件总线”的想法。如果是这种情况，您可以简单地实现自己的中间数据层 API，该 API 收集查询回调，并且 A) 在任何调用上调用回调以保存数据，B) 刷新对服务器的任何适当查询。不过，就目前而言，我会坚持使用 Flux，因为它会让您了解大多数人认为“好”的事物所涉及的一般原则，例如数据的单一事实来源、单向流动等

举一个回调思想的具体例子:

// data layer

const listeners = [];

const data = {
  save: save,
  query: query
};

function save(someData) {
  // save data to the server, and then...
  .then(data => {
    listeners.forEach(listener => listener(data));
  }); 
}

function query(params, callback) {
  // query the server with the params, then
  listeners.push(callback);
}

// component

componentWillMount() {
  data.query(params, data => this.setState({ myData: data }));
},

save() {
  // when the save operation is complete, it will "refresh" the query above
  data.save(someData);
}

这是一个非常精炼的示例，没有解决优化问题，例如移动到不同 View 和调用“过时”回调时可能出现的内存泄漏，但它应该让您对另一种方法有一个总体了解。

这两种方法具有相同的策略(数据的单一真实来源和单向数据流)，但实现不同(需要跟踪事件的全局“事件总线”，或者需要一个简单的回调方法)内存管理形式)。