React / Redux:为什么useEffect被调用了太多次?

Question

首先，如果第一个问题不熟悉，很难理解，我很抱歉

目的:从firestore中获取数据，并在更新存储列表时再次获取。

添加信息。我想从firestore获取数据，并在更新商店列表时重新绘制屏幕。

这是一个通用的列表更新。

问题:当store的值被更新时，useEffect想要执行fetch，但是useEffect总是被调用，并且对firestore的取回请求不会停止。

代码如下:

Test.jsx

...
import { useDispatch, useSelector } from "react-redux";
import { fetchStores } from "../../reducks/stores/operations";
const storesRef = db.collection('stores');
const Test = () => {
const dispatch = useDispatch();
const selector = useSelector(state=>state);
// stores set initialState
// stores: {
//   name: "",
//   list: [],
// }
const stores = selector.stores.list;
useEffect(()=>{
dispatch(fetchStores())
},[stores])
}
...

reducks/零售店里工作/operations.js

export const fetchStores = () => {
return async (dispatch) => {
storesRef.where().get()
.then(snapshots => {
const storeList = []
snapshots.forEach(snapshot => {
const store = snapshot.data();
store['id'] = snapshot.id;
storeList.push(store)
})
dispatch(fetchStoresAction(storeList))
})
}
}
*fetchStoresAction saves an array in the store list.

谢谢

Answer 1

你应该在useEffect中有一个空的依赖数组，这样获取请求只在组件被挂载时执行一次:

useEffect(() => {
dispatch(fetchStores())
}, [])

如果你想在新的存储被创建或更新时获取存储，你应该在一个可以访问更新或创建获取请求结果的函数中实现。如果结果是成功的(成功更新数据库)，那么你可以再次获取你的商店。