只更新/刷新子組件

我創建了一個表，其中包含從服務器獲取的數據。我使用下面的代碼每隔xx秒更新數據，但是當它更新時刷新頁面。作爲一個用戶，這會變得非常煩人，因爲無論你在做什麼都會被重置。只更新/刷新子組件

因此，我試圖找到一種方法，只使我的表更新沒有其他組件刷新。

容器>表>行是我的組件層次結構。

setTimeout(() => store.dispatch(fetchData('shops')), i);

fetchData（）

 return Object.assign({}, state, { 
      items: action.dataSet, 
      lastUpdated: action.receivedAt 
     });

謝謝！

我正在使用react和redux。

編輯：我覺得我沒有很好地解釋我的問題，所以我更新了問題。也許現在更好？

來源

2017-02-23 Naowut

如果你的'items'是對象，你應該使用深度比較 - https://lodash.com/docs#isEqual – Nick

我不明白你的意思：更新數據但不呈現數據？ – Lucas

對不起，我誤解了。 – Nick

this.props.data.items !== nextProps.data.items將返回true如果items是一個數組（這好像它是），因爲在JS比較時的對象（和陣列是一個對象）時，它是做一個指針比較（例如this.props.data.items === this.props.data.items將返回true）。

您也需要做一次深層的比較（可能使用類似lodash's isEqual）或數組轉換爲字符串，像這樣：JSON.stringify(this.props.data.items) !== JSON.stringify(nextProps.data.items)

還有一些進一步的閱讀，而我們在這！ https://ericlathrop.com/2017/02/why-did-this-react-component-rerender/

來源

2017-02-23 20:27:37 Sean

一種方法是將兩個陣列放入您的減速器中。一個用於「加載」的項目，另一個用於「傳入」項目。

const initialState = { 
    loaded: [], 
    incoming: [] 
};

然後你的組件只能依賴loaded數組。也許以後你想點擊一個按鈕，你的轉儲項目incoming到loaded陣列，因此您現在表顯示您的排隊項目

function incoming(state, action) { 
    return { 
    ...state, 
    incoming: state.incoming.concat(action.incoming) 
    }; 
}

：當新的項目被提取，你把它們添加到incoming陣列：

function loadQueuedItems(state) { 
    return { 
    incoming: [], 
    loaded: state.loaded.concat(state.incoming) 
    } 
}

你可以再調用從減速該功能，當您收到LOAD_INCOMING_ITEMS動作或類似的東西。

希望這會有所幫助！

來源

2017-02-23 22:30:06 Samo

只更新/刷新子組件

回答

相關問題