我如何处理更新 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 的所有其他方法实现相同的逻辑。