使用react-table初始化设置选中行时useState状态不更新问题

问题原因 #

1. React状态更新为异步操作 #

setMySelectedRows调用后不会立刻修改当前渲染周期的状态值，因此调用后立刻打印拿到的还是本次渲染的初始空值，新状态会在下一次渲染时生效，这是React的正常运行机制，不是状态没有更新。

2. 循环内更新状态逻辑错误 #

在map循环中重复调用setMySelectedRows，且每次展开的都是初始未更新的mySelectedRows空对象，即便状态最终更新，也只会保留最后一次循环的设置结果，前面的匹配项会被完全覆盖。

3. 匹配索引未正确存入状态 #

测试代码中硬编码了"0": true, "9": true，没有将实际匹配到的行索引存入选中对象，无法实现动态匹配预设选中行的需求。

修正代码 #

const [mySelectedRows, setMySelectedRows] = useState({});

const fakeData = [
    {"collectibleId": "b94e5d49-35f0-4bdc-9e41-d5c484df5ae7", "quantity": 2},
    {"collectibleId": "1def2f37-8043-4aa8-a490-b4024db216ff", "quantity": 2},
    {"collectibleId": "ac5bc2af-f67d-46da-bac1-1b404a3dd6d1", "quantity": 2}
]

useEffect(() => {
    const selectedObj = {}
    if (collectibles) {
        collectibles.forEach((collectibleRow, index) => {
            // 校验当前行是否在预设选中列表中
            const isMatched = fakeData.some(c => c.collectibleId === collectibleRow.collectibleId)
            if (isMatched) {
                selectedObj[index] = true
            }
        })
    }
    // 所有匹配项收集完成后一次性更新状态
    setMySelectedRows(selectedObj)
}, [collectibles])

// 监听状态变化确认更新结果
useEffect(() => {
    console.log('最终选中行状态：', mySelectedRows)
}, [mySelectedRows])

注意事项 #

• 仅遍历不需要返回新数组时，用forEach代替map语义更清晰
• 仅判断是否存在匹配项时，用some方法比find性能更好，无需返回完整匹配对象
• 需确认react-table的行索引和collectibles数组索引完全对应，避免索引错乱导致选中行偏移

内容的提问来源于stack exchange，提问作者alienbuild