为什么多次调用useEffect？答案

【问题标题】：Why is useEffect called several times?为什么多次调用useEffect？
【发布时间】：2020-03-24 20:52:28
【问题描述】：

在我的应用程序中，我使用挂钩来设置变量的值。我有一个调用 API 并设置“rooms”变量值的函数。

我使用useEffect 来完成componentDidMount 的生命周期。然而，即使我在代码中输入了条件，getRooms() 在我的应用程序中也被调用了 4 次。当我渲染房间的值时，我得到了 4 次同一个房间，而它应该只出现一次。

这是我的代码：

export default function Rooms() {

    const [rooms, setRooms] = useState({})

    function getRooms() {
        client.get('/rooms').then((s) => {setRooms(s.data.rooms)}, (e) => {console.log(e)});
    }

    useEffect(() => {
        if(Object.values(rooms).length === 0) {
            getRooms();
        }
    })

    return (
        <React.Fragment>
            <InfoPanel
                title="rooms"
                description="skip this part if you don't have any room in your house"
                instruction="select and name every room you have" />
            <ActionPanel>
                {Object.values(rooms).map((r) => {
                    return <p>{r.title}</p>
                })}

            </ActionPanel>
        </React.Fragment>
    )
}

如何确保我的代码在组件挂载时只被调用一次？

注意：“客户端”是 axios。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我优化了你的解决方案

export default function Rooms() {

    const [rooms, setRooms] = useState({})



    useEffect(() => {
        function getRooms() {
        client.get('/rooms').then((s) => {return s.data.rooms}, (e) => {console.log(e)});
    }

        if(Object.values(rooms).length === 0) {
            const apiResult = getRooms();
            setState(apiResult);
        }
    }, [])

    return (
        <React.Fragment>
            <InfoPanel
                title="rooms"
                description="skip this part if you don't have any room in your house"
                instruction="select and name every room you have" />
            <ActionPanel>
                {Object.values(rooms).map((r) => {
                    return <p>{r.title}</p>
                })}

            </ActionPanel>
        </React.Fragment>
    )
}

【讨论】：

【解决方案2】：

添加一个空数组作为useEffect() 的第二个参数。

useEffect(() => {
    doStuff();
}, []);

第二个参数告诉哪些更改应该触发该函数。空数组意味着运行一次，但不对进一步的更改做出反应。

请参阅正确的文档here。

【讨论】：