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 };
};

TrackContext.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的任何直接或间接调用。

在useGetFavoriteTracks中，您不能像这样无条件地调用addFavoriteTracks(data);。将该呼叫放入useEffect中。

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

React-超过最大更新深度

1 个答案: