componentDidUpdate 创建无限循环，不知道如何避免它

Question

您好，我正在调用 componentdidupdate，以便像这样使用新的 ToDo 重新呈现我的页面

        this.state = {
            displayToDos: false,
            displayLanding: true,
            todo: {
                title: '',
                task: ''
            },
            todos: [],
            createdToDo: null,
            updateModal: false
        }
    }

    async componentDidMount() {
        this.fetchItems()
    }

    componentDidUpdate(prevState) {
        if (prevState.todos !== this.state.todos) {
            this.fetchItems()
        }
    }

    fetchItems = async () => {
        try {
            const todos = await getItems()
            this.setState({ todos })
            console.log('set state of todos', this.state.todos)
        } catch (err) {
            console.error(err)
        }
    }

我对我的应用程序的预期行为是组件挂载获取项目并将它们设置为状态，然后每当我发帖、更新或删除调用 todos 更改的状态并触发获取调用以重新渲染页面上的待办事项。但是我得到一个无限循环，我该如何解决这个问题？

Answer 1

您可以像这样比较数组： let arraysEqual = JSON.stringify(todo) == JSON.stringify(todo1); 或者我会建议你使用这个库Loadsh 您可以使用.isEqual 方法检查数组。