React useState 未在数组拼接上更新答案

【问题标题】：React useState not updating on array spliceReact useState 未在数组拼接上更新
【发布时间】：2022-09-30 20:07:08
【问题描述】：

我有使用状态：

const [localImportedCustomers, setLocalImportedCustomers] = useState([]);

和模板，以显示数据：

<tbody>
{
    localImportedCustomers.map((value, index) => {
        return (
            <tr key={index}>
                <td>{index+1}</td>
                {
                    value.map((value1, index1) => {
                        return (
                            <td key={index1}>{value1}</td>
                        )
                    })
                }
                <td>
                    <button 
                        className=\"c-btn c-btn-danger\"
                        onClick={ (e) => { deleteRow(e, index) } }
                    >
                        <FaTrash />
                    </button>
                </td>
            </tr>
        )
    })
}
</tbody>

尝试通过以下功能删除特定行：

const deleteRow = (e, index) => {
    e.preventDefault();
    let tmpArray = localImportedCustomers;
    tmpArray.splice(index, 1);
    setLocalImportedCustomers(tmpArray);
}

但是模板没有更新，应该有人有这样的问题吗？感谢您在时间之前的回答！

标签： reactjs react-hooks updating

【解决方案1】：

您正在引用相同的数组。尝试传播它，以便它实际上在内存中创建新数组。

    let tmpArray = [...localImportedCustomers];

【讨论】：

非常感谢，效果很好！

【解决方案2】：

splice() 就地修改数组，而不是创建新数组。这意味着您将状态设置为相同的数组引用（即使它的内容已经改变），并且 React 并不认为这是对状态的更新。

将状态设置为新的数组引用。这可能就像这样简单：

let tmpArray = [...localImportedCustomers];

这将创建一个新数组并将现有数组的内容传播到其中。因此，当状态更新时，数组引用本身已经改变，React 将其视为新状态。

【讨论】：

太感谢了！现在它的工作正常！