在 Hooks 中使用 React 时 useEffect 进入无限循环答案

【问题标题】：useEffect enters infinite loop when using React in Hooks在 Hooks 中使用 React 时 useEffect 进入无限循环
【发布时间】：2019-09-06 21:37:06
【问题描述】：

我正在使用 react 进行分页。执行此操作时，我在此处传输父组件中的状态。我使用新数组将我传输的信息传输到不同的状态，但是当我使用 useEffect 执行此操作时，它会进入无限循环。我无法设置定义状态。

const Pagination = ({ posts }) => {


    const gecici = posts
    const sabit = 5;

    const [dene, setDene] = useState([])
    const [degisken, setDegisken] = useState(0)



    useEffect(() => {

        degistir()

        console.log(dene)

    }, [dene])


    const degistir =() => {
        var i = 1,
            j;
        if (sabit <= gecici.length) {
            for (j = 0; j < (gecici.length / sabit); j++) {
                setDene([
                    {
                        id: i, include:
                            gecici.slice(degisken, degisken + sabit)

                    }
                ]);
                i += 1;
                setDegisken(degisken+sabit)
            }
        }
    }

因为我正在分页，所以我要在每个页面上添加不超过“sabit”值的内容。这里的值i表示页码。

j的值是将数组填充到总页数。

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

useEffect 依赖数组的工作方式是检查数组中来自前一次渲染和新渲染的所有项之间的严格 (===) 等效性。因此，将一个数组放入您的 useEffect 依赖数组是非常麻烦的，因为与 === 的数组比较检查的是等价性通过引用而不是通过内容。

const foo = [1, 2, 3];
const bar = foo;
foo === bar; // true

const foo = [1, 2, 3];
const bar = [1, 2, 3];
foo === bar; // false

所以，既然你有这个：

    useEffect(() => {

        degistir()

        console.log(dene)

    }, [dene])

您的组件进入无限循环。 degistir() 将 dene 的值更新为新数组。但即使内容相同，dene 的 reference 也发生了变化，useEffect 回调再次触发，无穷无尽。

解决方案在一定程度上取决于您希望发生的确切行为。如果您希望每次数组的 size 更改时触发 useEffect 回调，那么只需使用依赖数组中的数组长度，而不是数组本身：

    useEffect(() => {

        degistir()

        console.log(dene)

    }, [dene.length])

一个不太理想的解决方案是将您的数组转换为字符串，并将旧的字符串化数组与新的字符串化数组进行比较：

    useEffect(() => {

        degistir()

        console.log(dene)

    }, [JSON.stringify(dene)])

这非常低效，但如果数组中的项目数量很少，则可能会起作用。

最好的选择可能是完全摆脱 useEffect。你不太可能真的需要它。相反，您可能可以将分页作为纯粹的结果来完成：1）帖子总数，以及 2）当前页面。然后只需为当前页面呈现正确的帖子，并具有更新当前页面值的机制。

也许是这样的？因为我只会说英语，所以变量的命名让我感到困惑：

const Pagination = ({ posts }) => {


    const gecici = posts
    const sabit = 5;

    const [degisken, setDegisken] = useState(0)

    let dene = [];

        var i = 1,
            j;
        if (sabit <= gecici.length) {
            for (j = 0; j < (gecici.length / sabit); j++) {
                dene = [
                    {
                        id: i, include:
                            gecici.slice(degisken, degisken + sabit)

                    }
                ];
                i += 1;
            }
        }

【讨论】：