React hooks - useEffect 方法不断获取

Question

在我的许多组件中，我必须使用存储中的令牌来获取数据并表示它(页眉菜单、页脚菜单、页面上的产品、滑块图像等(。我试图做的是仅在我没有这些数据时才获取这些数据，但是每次令牌更改时 React 都会发送请求(因为令牌是依赖项(，即使我清楚地提出了条件并且如果我控制台.log它我可以看到它。我做错了什么？

const [cities, setCities] = useState([]);
useEffect(() => {
if (!cities.length) {
fetch(`.....&token=${props.token}`)
.then(response => response.json())
.then(data => {
if (data.data.results) {
setCities(data.data.results.cities)
}
})
}
}, [props.token, cities.length]);

Answer 1

无论如何，cities在第一次渲染时都是空的，所以你不需要检查它的长度并将其指定为依赖项：

const [cities, setCities] = useState([]);
useEffect(() => {
fetch(`.....&token=${props.token}`)
.then(response => response.json())
.then(data => {
if (data.data.results) {
setCities(data.data.results.cities)
}
})
}, [props.token]);

您还可以记住令牌以防止它触发useEffect回调：

const token = useMemo(() => props.token, []);

Answer 2

//因为评论而编辑

// should be outside of the function
let timesExecuted = 0
function fetch () {
useEffect(() => {
if(props.token){
timesExecuted = timesExecuted + 1
}
if (timesExecuted === 1) {
fetch(`.....&token=${props.token}`)
.then(response => response.json())
.then(data => {
if (data.data.results) {
setCities(data.data.results.cities)
}
})
}
}, [props.token]);
}

所以它每次都会来，但只有在 prop.token 是 OKEY 时才执行(随意根据令牌验证修改第一个 IF(。