我如何處理更新 object 的 state，其中數據是從多個 React 源接收的？

Question

假設我有一組我感興趣的 state 對象。

例如表格的一些數據：

const data = [{
    A: a,
    B: b,
    C: c,
    D: d
},...]

假設 C 和 D 是高成本查詢項，因此為了提高速度，我用 A 和 B 加載頁面。然后，一旦我有 A 和 BI go 並獲取 C 和 D 項。

我每隔...秒再次獲取所有數據，以便我擁有最新的值。

fetchAB(); // Called every x seconds
fetchCD(); // Called every y seconds

我需要 map 這些值到一個組件，它應該更新並顯示最新的值：

const SomeComponent = () => {
    const [data, setData] = useState([]);
    
    // Some fetch logic

    return(
        {
        data.map((d, idx) => {
            return (
            <key={idx}>
                <td>{d.A}</td>
                <td>{d.B}</td>
                <td>{d.C}</td>
                <td>{d.D}</td>   
            </> 
        )}
    )}
    )
}

我 go 如何更新從兩個（或更多）源更新的映射對象數組的 state？

Answer 1

我發現實現此目的的最佳方法是將我的對象數組轉換為 object 個對象。

這樣我就可以對以前的狀態使用直接映射。

例如

// Displaying the data structure, not actually a const. Data is returned from an API fetch.

const data = {
    1 : {
        A: a,
        B: b,
        C: c,
        D: d
    },
    2: {
        A: a,
        B: b,
        C: c,
        D: d
    },...
}

然后我可以像這樣更新 state：

var dataCD = fetchCD();
// Returns an object with id as the key, with "C, D" values.

var keys = Object.keys(dataCD);
for (var key in keys){
    data[key] = {
    ...data[key], // Include all previous data values in the object
    C: dataCD[key]["C"],
    D: dataCD[key]["D"] 
    }
}

必須為更新 object state 的所有其他方法實現相同的邏輯。