反应 - 超出最大更新深度

Question

我正在使用useAxios钩子从Api获取数据，然后使用Constate库将数据添加到全局状态。 但是，我收到错误：">超出最大更新深度"。那么，如何让它工作呢？另外，在我的用例中处理异步 API 和全局状态的最佳实践是什么？

在索引组件中：

const {loading, error} = useGetFavoriteTracks()
const {state} = useTrackContext()

在 useGetFavoriteTracks.js 中，获取数据，然后将收藏夹曲目添加到全局状态

export const useGetFavoriteTracks = params => {
const { data, error, loading } = useAxios({
axiosInstance: myApiAxiosInstance,
url: myApiEndPoint.FAVORITE_TRACKS
});
const { addFavoriteTracks } = useTrackContext();
addFavoriteTracks(data); //add favorite tracks to global state
return { loading, error };
};

跟踪上下文.js

const useTrack = params => {
const [state, dispatch] = useReducer(reducer, initialState);
const addFavoriteTracks = (data) => {  
dispatch({
type: trackActionTypes.FAVORITE_TRACKS_FETCHED_SUCCESS,
payload: data
})  
}
return {state, addFavoriteTracks}
}
export const [TrackProvider, useTrackContext] = constate(useTrack);

Answer 1

经验法则：在渲染过程中不得触发对setState或dispatch的任何直接或间接调用。

在使用GetFavoriteTracks时，您不得无条件地调用addFavoriteTracks(data);。把那个电话放在useEffect里面。

useEffect(() => {
if (!loading && data) addFavoriteTracks(data);
}, [loading, data])