在React中的兩個組件之間更新數據

Question

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

我有一輛汽車的清單，單擊每一行，它應該顯示幻燈片到該汽車的整頁詳細信息。

我的代碼結構是：

我有呈現兩個組件的應用程序。 CarList和CarDetails。 “汽車詳細信息”最初是隱藏的。 我在應用程序中渲染carDetails的原因是因為它是一個龐大的修復模板，所以我想在加載應用程序時渲染一次，只在單擊每一行時更新它的數據。

CarList還呈現很好的CarRow組件。 現在我的問題是我在CarRow組件上有一個getDetails函數，該函數正在根據汽車ID進行調用以獲取詳細信息。 如何獲取carDetails組件數據的更新？ 我使用了this.setState（{itemDetails：data}）; 但似乎carRow的狀態與carDetails中的state不同。

有什么幫助嗎？

Answer 1

這是一個基本的問題，為了進行嘗試和解決，已經花費了很多思想和工時。 除了在表面上，在StackOverflow帖子中可能無法回答。 它也不是以React為中心的。 無論使用哪種框架，這對於大多數應用程序都是一個問題。

既然您是在React的上下文中詢問的，那么您可能會考慮讀入flux ，這是與React一起實際實現的這種單向數據流思想。 但是，該架構絕不是“最好的”。 像其他所有東西一樣，它也有優缺點。

有些人不喜歡flux提出的全球“事件總線”的想法。 在這種情況下，您可以簡單地實現自己的中間數據層API，該API收集查詢回調，並且A）在任何調用中調用回調以保存數據，並且B）將任何適當的查詢刷新到服務器。 不過，目前為止，我會堅持不懈，因為它會帶給您有關大多數人認為“好”的事物所涉及的一般原理的想法，例如數據的單一真實來源，單向流動等

給出回調想法的具體示例：

// 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);
}

這是一個非常簡單的示例，並且沒有解決優化問題，例如在轉移到不同的視圖並調用“陳舊的”回調時可能發生的內存泄漏，但是它應該為您提供另一種方法的總體思路。

兩種方法具有相同的策略（數據的單一事實來源和數據流的一種方式），但實現方式不同（全局“事件總線”需要跟蹤事件，而簡單的回調方法可能需要某種形式的內存）管理）。