问题描述
此代码使我陷入无限循环.
I'm getting an infinite loop with this code.
我一直在尝试其他帖子中的一些解决方案,但是它们不起作用.
I've been trying some of the solutions from another posts but they don't work.
locationAddress
是一个地址数组,我正在尝试使用Google Maps Geocode API获取坐标.
locationAddress
is an array of addresses and I'm trying to get the coordinates using the Google Maps Geocode API.
const reducer = (state, action) => {
switch (action.type) {
case 'add':
return [
...state,
{
address: action.address,
name: action.name,
id: action.id
}
];
case 'remove':
return state.filter((_, index) => index !== action.index)
default:
return state;
}
}
const [locationAddress, setLocationAddress] = useReducer(reducer, []);
const [coordinates, setCoordinates] = useState([]);
useEffect(() => {
const fetchLocation = async () => {
for(let i = 0; i < locationAddress.length; i++) {
const response = await axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: locationAddress[i].address,
key: 'MyAPIKey'
}
})
.then(response => {
setLocationAddress({locationAddress: response.data});
setCoordinates([...coordinates, {lat: response.data.results[0].geometry.location.lat, lng: response.data.results[0].geometry.location.lng}]);
}
)
.catch(error => {
console.log(error)
});
}
}
fetchLocation();
},[coordinates, locationAddress]);
推荐答案
其背后的原因是依赖项数组.基本上,当axios
调用完成时,您将使用setCoordinates
和setLocationAddress
更新依赖关系,这将再次触发useEffect
挂钩的回调.
The reason behind that is your dependency array. Basically when axios
call finished you are updating your dependencies with setCoordinates
and setLocationAddress
which triggers again the useEffect
hook's callback.
如果用设置器功能[setCoordinates
,setLocationAddress
]替换[coordinates, locationAddress]
,则它将按预期工作.
If you replace [coordinates, locationAddress]
with the setter functions [setCoordinates
, setLocationAddress
] then it will work as expected.
应该起作用的解决方案:
The solution which should work:
const [locationAddress, setLocationAddress] = useReducer(reducer, []);
const [coordinates, setCoordinates] = useState([]);
useEffect(() => {
// ... removed definition for better representation in the answer
fetchLocation();
}, [setCoordinates, setLocationAddress]);
由于缺少coordinates
和locationAddress
,您可能会收到一条警告消息,可以通过在依赖项数组之前的一行中用// eslint-disable-next-line react-hooks/exhaustive-deps
注释禁用它们.
You might have a warning message because of missing coordinates
and locationAddress
which you can disable with // eslint-disable-next-line react-hooks/exhaustive-deps
comment one line before the dependency array.
希望对您有帮助!
这篇关于React useEffect无限循环获取数据axios的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!