“传递给 useEffect 的最后一个参数在渲染之间改变了大小”，但我认为它不会？

Question

我认为我以前从未收到过此错误：

传递给 useEffect 的最后一个参数改变了渲染之间的大小。此数组的顺序和大小必须保持不变。

我已经完成了useEffect()100 次axios 请求，使用useEffect()方式与 类似componentDidMount()，但这是我第一次使用带有async/的可重用函数await，并将数据解析回useEffect(). 网上的其他人在他们的教程中也在做同样的事情，但他们从未提到过这个错误。

const [tableData, setTableData] = useState([])
    useEffect(() => {
        const data = async() => {
            const dataArr = await getPagList('tags', 1, 25)
            console.log("Data received: ", dataArr)
            if(dataArr.length > 0) {
                setTableData(dataArr)
            }
        }
        data()
    }, [])

我相信，它在抱怨我useEffect()作为第二个参数提供的空数组。然而，那个空数组并没有改变……对吧？我尝试使用谷歌搜索它，但我为这个错误找到的解决方案是我已经在做的。没有一个例子使用async/ await。

我也试过这个，没有成功：

    useEffect(() => {
        setData()
    }, [])

    const setData = () => {
        const data = async() => {
            const dataArr = await getPagList('tags', 1, 25)
            console.log("Data received: ", dataArr)
            if(dataArr.length > 0) {
                setTableData(dataArr)
            }
            // TODO Properly handle this data now that I'm getting it in. It's only 9 records though.
        }
        data()
    }

我没有正确退出 useEffect 还是什么？无论如何，谢谢各位。

Answer 1

如果你有一个

useEffect(() => {}, itemArray)

并且您修改 itemArray，您将收到此错误。这可能只是一个错字。当我有一份我在 state 中使用的项目列表时，我就这样做了。它没有抓住它，因为它是一个数组。您需要 [] 围绕 itemArray。

useEffect(() => {}, [itemArray])

真正的问题是你的依赖数组改变了大小，而不是你在数组中添加了另一个项目。修正这个错字，你应该没问题。