Redux 是否会导致 React 警告“渲染不同组件时无法更新组件”

Question

React 警告“渲染不同组件时无法更新组件”已添加到版本 16.13.0 的 React。警告的原因可能有点难以追踪。

React blog 声明：

<块引用>

React 组件不应在渲染过程中对其他组件造成副作用。 支持在渲染时调用 setState，但仅限于同一个组件。

问题是，Redux 会导致这种行为吗？

Answer 1

是的，如果你犯了错误。我编写了一个 Redux thunk 动作（一个异步动作），有时会立即在缓存中找到所需的数据，并在渲染期间分派一个动作事件。有时此操作会更新在许多页面上使用的状态。这导致了警告。

状态的一部分

import {createSlice} from '@reduxjs/toolkit';

export const dataSlice = createSlice({
    name: 'data',
    initialState: {
        /** Base data from server */
        baseData: null,

        // === Place page ===

        /** Fetching status for place data */
        placeDataFetchStatus: FetchStatus.NOT_STARTED,
        ...

这里我在渲染期间为组件 PlacePage 获取数据

function PlacePage(props) {
    const dispatch = useDispatch();
    const {place_uri, area_uri, place_type_uri} = useParams();

    dispatch(fetchPlacePageData(place_uri, area_uri, place_type_uri));

此异步操作导致警告

export const fetchPlacePageData = (place_uri, area_uri, place_type_uri) => (dispatch, getState) => {
    DataFetcher.implFetchPlacePageData(dispatch, getState, place_uri, area_uri, place_type_uri);
};


export const implFetchPlacePageData = (dispatch, getState, reqPlaceInfo, place_uri, area_uri, place_type_uri) => {
    ...

    // check if data is in cache
    const data = PlacePageDataCache.getData(id);
    if (data) {
        # The base data is used on many pages, this dispatch causes the warning 
        dispatch(set_base_data(data.base_data));

        dispatch(set_all_place_data(data.place_data));
        return;
    }

这是来自浏览器控制台日志的堆栈跟踪：