Javascript 为什么要多次调用useffect？

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

我使用了

useffect

，以便像

componentDidMount

lifecycle一样使用它。但是，即使我在代码中添加了条件，在我的应用程序中，

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>
    )
}

导出默认功能室（）{
const[rooms，setRooms]=useState（{}）
函数getRooms（）{
然后（（s）=>{setRooms（s.data.rooms）}，（e）=>{console.log（e）}）；
}
useffect（（）=>{
if（Object.values（rooms.length==0）{
getRooms（）；
}
})
返回(
{Object.values（rooms.map）（（r）=>{
返回{r.title}

})}
)
}

如何确保在安装组件时只调用一次代码

---

注意：“客户端”是axios。

我优化了您的解决方案

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>
    )
}

导出默认功能室（）{
const[rooms，setRooms]=useState（{}）
useffect（（）=>{
函数getRooms（）{
然后（（s）=>{returns.data.rooms}，（e）=>{console.log（e）}）；
}
if（Object.values（rooms.length==0）{
const apireult=getRooms（）；
设置状态（结果）；
}
}, [])
返回(
{Object.values（rooms.map）（（r）=>{
返回{r.title}

})}
)
}

添加一个空数组作为

useffect（）

的第二个参数

第二个参数说明哪些更改应该触发函数。空数组意味着只运行一次，但不响应更大的更改

请参阅右侧的文档

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