在我的应用程序中,我使用 Hook 来设置变量的值。我有一个函数可以调用 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。
最佳答案
我优化了您的解决方案
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>
)
}
关于javascript - 为什么 useEffect 会被调用多次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60831268/