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

【问题标题】：Can Redux cause the React warning "Cannot update a component while rendering a different component"Redux 是否会导致 React 警告“在渲染不同组件时无法更新组件”
【发布时间】：2021-02-20 00:13:46
【问题描述】：

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

React blog 声明：

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

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

【问题讨论】：

标签： reactjs redux

【解决方案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;
    }

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

【讨论】：

感谢您为您的问题提供如此详细的答案。这将有助于其他有类似问题的人！