如何从反应引导表中的 onSelectAll 复选框设置反应使用状态数组

Question

我有一个包含多行的表，每行都有一个相应的复选框。目前，当我选中一个复选框时，我有一个使用状态数组，该数组使用行中的名称进行更新。即，如果我有一个包含三行的表，Bob、Jon、Joe，并且每个名称旁边都有一个复选框，则单击该复选框后，该名称将进入数组。

const handleAdd = (fileRow) => {
        setSelectedFileRows([...selectedFileRows, fileRow]);
    };
    const handleRemove = (fileRow) => {
        const newFiles = selectedFileRows.filter((t) => t !== fileRow);
        setSelectedFileRows(newFiles);
    };
    const selectRow = {
        mode: "checkbox",
        style: { backgroundColor: "#c8e6c9" },
        onSelect: (row, isSelect) => {
            if (isSelect) {;
                handleAdd(row.name);
            } else {
                handleRemove(row.name);
            }
        }

这一切都很好，但当我尝试使用 onSelectAll 填充数组时，其中一个复选框被单击并且所有行也同样被选中，数组没有正确填充。

onSelectAll: (isSelect, rows) => {
            if (isSelect) {
                rows.forEach((row) => {
                    handleAdd(row.name);
                });
            } else {
                rows.forEach((item) => {
                    handleRemove(item.name);
                });
            }
        }

我已经看到我不应该在循环中更新使用状态，但我是新手，并没有真正看到一种方法来获取所有名称以填充数组。

Answer 1

问题在于，对于useState，当您执行setX 时，它实际上不会更新X，直到下一次渲染。因此，当您在循环中添加/删除时，您将不断查看当前渲染的初始状态。

诀窍是一次添加所有内容/删除所有内容，我会这样做：

const handleAdd = (fileRows) => {
    if (!Array.isArray(fileRows)) {
        fileRows = [fileRows];
    }
    setSelectedFileRows([...selectedFileRows, ...fileRows]);
};
const handleRemove = (fileRows) => {
    if (!Array.isArray(fileRows)) {
        fileRows = [fileRows];
    }
    const newFiles = selectedFileRows.filter((t) => !fileRows.includes(t));
    setSelectedFileRows(newFiles);
};

onSelectAll: (isSelect, rows) => {
    if (isSelect) {
        handleAdd(rows.map(r => r.name));
    } else {
        handleRemove(rows.map(r => r.name));
    }
}