Question

我正在尝试使用 MongoDB 数据库构建一个简单的待办事项列表 Web 应用程序。我的功能似乎可以正常工作，但是我的 useEffect 钩子不断向服务器发出无限量的发布请求。我很困惑为什么会发生这种情况。

反应代码

    useEffect(() => {
        const payload = {
            roomkey: roomKey
        }
        async function getToDos() {
            const response = await axios({
                url: 'http://localhost:4000/api/choresdisplay',
                method: 'post',
                data: payload
            })

            setItems(response.data.items)

        }
        getToDos();

    }, [roomKey, items]) // render whenever roomkey changes (page load) or when user
                         // adds/deletes item

    console.log(items)
    function addItem() {
        /*setItems(prevItems => {
            return [...prevItems, inputText];
        });*/

        const payload = {
            item: inputText,
            roomKey: roomKey
        }
        async function addTodo() {
            const response = await axios({
                url: 'http://localhost:4000/api/chores',
                method: 'post',
                data: payload
            })
        }
        addTodo()
        setInputText("");
    }

服务端

userRouter.post('/chores', function (req, res) {
    const roomkey = req.body.roomKey;
    const newItem = new tdlModel({
        Item: req.body.item,
        roomKey: roomkey
    });
    newItem.save()
})

userRouter.post('/choresdisplay', async function (req, res) {
    const roomkey = req.body.roomkey;
    console.log(roomkey)
    tdlModel.find({ roomKey: roomkey }, await function (err, foundMates) {
        console.log(foundMates)
        if (err) {
            res.send({
                token: USER_LOGIN_FAIL
            })
        } else {
            console.log(foundMates);
            res.send({
                token: USER_LOGIN_SUCCESS,
                items: foundMates,
            })
        }
    })
})

Answer 1

这是因为您告诉 useEffect 在 items 更改时重新运行，但随后您在 useEffect 本身内更改了它。所以你正在创建一个无限循环。没有这种依赖，你的逻辑似乎很好，所以把它从列表中删除：

    ....
    }, [roomKey])

Answer 2

当您在 useEffect 中更改状态 (setItems) 并监听同一状态 (items) 的更改时，会导致无限循环。

您需要在调用周围添加条件或更改依赖项数组

useEffect 常量 post 请求

2 个答案: