数组值在 useEffect 钩子中更改-解网

问：

我有一个文件上传组件，每当添加文件时，如果没有任何错误，我们都会尝试上传它。如果遇到任何错误（类型/大小/网络等问题），我们会在文件对象中设置错误键，并设置收到的错误类型。

就我而言，问题是每当更新 Files 数组时，我都会有一个 useEffect 钩子来更新错误状态，以呈现错误组件。

这是钩子：useEffect

useEffect(() => {
    if (files.length === 0) {
        setError?.(false);
    }

    console.log("FilesArray before filter =>", files);

    const errorFiles = files.filter((file, index) => {
        console.log("FilesArray =>", file, `File at index = ${index}`, file, "fileError =>", file.error);
        return file.error;
    });

    console.log("FilesArray after filter =>", files, "ErrorFiles Array =>", errorFiles);

    setError?.(errorFiles.length !== 0, errorFiles);
}, [files]);

我也尝试在过滤器函数中添加控制台日志，问题是在过滤器之前和之后记录的文件数组在错误键中具有“technicalError”，而过滤器方法中记录的文件数组没有。

下面是控制台中的快照。

JavaScript 反应JS

对不起，我将无法再共享任何代码。我们实际上发现了这个问题，正如@DrewReese指出的那样，“您在其他地方有一些代码正在改变此文件数组”。我们错误地改变了状态。类似的事情：我遇到了 react.dev/learn/......创建一个新数组并使用它解决了我的问题

setFiles(_files => {     let index = 0;     const file = _files[index];     file.error = "randomError";     _files[index] = file;     return _files; })

const tempArr = [..._files];

答：

-1赞 Konstantinos K. 11/17/2023 #1

通过创建浅拷贝（filesCopy），确保对 useEffect 钩子内 files 数组的稳定副本进行操作。这样可以防止由关闭引起的意外行为，并确保准确过滤有错误的文件。

useEffect(() => {
    if (files.length === 0) {
        setError?.(false);
    }

    const filesCopy = [...files]; // Create a shallow copy of the files array

    const errorFiles = filesCopy.filter((file, index) => file.error);

    setError?.(errorFiles.length !== 0, errorFiles);
}, [files]);

你在这里期待什么样的意外行为？在不更改旧数组的情况下创建一个新数组，因此从某种意义上说，它已经是一个浅层的，不是副本，而是子集。什么是数组的“不准确过滤”，这种浅拷贝如何帮助解决这个问题？Array#filter()

上一个：使多人绘图游戏画布具有响应性

下一个：如何使用 react-to-print 正确打印嵌套组件

数组值在 useEffect 钩子中更改

Array values change inside useEffect hook

评论

评论