React组件未随react-redux状态更新重新渲染问题求助

问题原因 #

• 核心问题：UserManagement.js 中的 useEffect 依赖数组为空，仅会在组件首次挂载时执行一次。后续 Redux store 中的 region 更新时，useEffect 不会重新触发，也就不会更新表格的 pageData 状态，导致表格不会同步渲染。
• 冗余状态问题：额外定义的本地状态 regionState 完全没有必要，直接使用 useSelector 获取到的全局 region 即可，多余的状态同步反而会增加bug风险。
• 代码笔误：返回的 Table 组件中用到的 items、collectionProps 没有定义，按照逻辑应该绑定 items={pageData}。

修复方案 #

修改 UserManagement.js 中的对应代码即可：

import React, { useState, useEffect } from "react";
import {
  Box,
  ButtonDropdown,
  Table,
} from "private-compontent";
import fakeData from "../fakeData"

import { useSelector, useDispatch } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actionCreators } from '../../../state/actionsCreators'

export const DetailsTable = (props) => {
 
  const [pageData, setPageData] = useState([]);
  const region = useSelector((state) => state.region)
  const dispatch = useDispatch();
  const { changeRegion } = bindActionCreators(actionCreators, dispatch)
  // 删掉冗余的regionState定义
  const currentUserRegion = region === '' ? "Select Region" : "Region: " + region;  

  // 把region加入useEffect依赖数组
  useEffect(() => {
    if (region && region !== '') {
      setPageData(fakeData);
    } else {
      setPageData([{}]);
    }
  }, [region]);


    const regionChange = (event) => {
      changeRegion(event.detail.id)
    }

  function EmptyState({ title, subtitle, action }) {
    return (
      <Box textAlign="center" color="inherit">
        <Box variant="strong" textAlign="center" color="inherit">
          {title}
        </Box>
        <Box variant="p" padding={{ bottom: 's' }} color="inherit">
          {subtitle}
        </Box>
        {action}
      </Box>
    );
  }
  
  return (
    <>
      <Table
        items={pageData} // 替换未定义的items变量
        empty={
          <EmptyState
          title="No Data"
          subtitle="No data to display"
          action={
            <ButtonDropdown
              items={[
                  { text: "NA", id: "NA", disabled: false },
                  { text: "EU", id: "EU", disabled: false },
                  { text: "FE", id: "FE", disabled: false },
              ]}
              onItemClick={regionChange}
            >
            {currentUserRegion}
          </ButtonDropdown> }
        />
        }
      />
    </>
  );
};

export default DetailsTable;

修改完成后，无论在 Navbar 还是 UserManagement 组件中切换地区，表格都会同步响应 Redux 中 region 的变更更新渲染内容。

内容的提问来源于stack exchange，提问作者doriansm