React组件未随Redux状态变更重新渲染问题求助

核心问题排查 #

• Component.tsx存在未定义变量，导致组件报错
  你的Component.tsx代码中使用了未定义的item和value变量，这会触发ReferenceError，使组件无法正常渲染或响应状态变更：

  // 错误代码片段
  <tr className="table-row-item-regular" key={item.id}>
    <th scope="row" className="table-description-item">TITLE</th>
    <td>{quarterFromStore}</td>
    <td>{numbersInputDataValues[value as keyof numbersInputInitialStateModel]}</td>
  </tr>
  

  必须确保item和value是已定义的变量，比如通过遍历预设数据列表来获取。

• AssumptionsBox.tsx中的action调用笔误
  在handleSubmit函数中，你调用了不存在的setFilingStatus action，正确的action应为setStatus：

  // 错误
  dispatch(setFilingStatus(tempStatus));
  // 正确修复
  dispatch(setStatus(tempStatus));
  

  这个笔误会导致status状态无法更新，若Component依赖该状态，会直接影响渲染。

验证与修复步骤 #

1. 修复Component.tsx的变量未定义问题
   定义需要渲染的表格数据，确保每个表格项的item和key明确：

   import { useAppSelector } from "../redux/hooks";
   import { numbersInputInitialStateModel } from "../types";
   
   // 预设表格数据
   const tableItems = [
     { id: 1, description: "Bank One", key: "bankOne" },
     { id: 2, description: "Bank Two", key: "bankTwo" },
     { id: 3, description: "Bank Three", key: "bankThree" },
     { id: 4, description: "Bank Four", key: "bankFour" },
   ];
   
   const Component = () => {
     const quarterFromStore = useAppSelector(state => state.assumptionsState.quarter);
     const numbersInputDataValues = useAppSelector(state => state.numbersInputState);
   
     // 添加日志确认状态是否更新
     console.log("当前季度：", quarterFromStore);
     console.log("银行数据：", numbersInputDataValues);
   
     return (
       <div id="numbers-output">
         <header className="box-title">SUMMARY</header>
         <table className="table">
           <thead className="table-header">
             <tr>
               <th scope="col">DESCRIPTION</th>
               <th scope="col">COLUMN ONE</th>
               <th scope="col">COLUMN TWO</th>
             </tr>
           </thead>
           <tbody>
             {tableItems.map(item => (
               <tr className="table-row-item-regular" key={item.id}>
                 <th scope="row" className="table-description-item">{item.description}</th>
                 <td>{quarterFromStore}</td>
                 <td>{numbersInputDataValues[item.key as keyof numbersInputInitialStateModel]}</td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     );
   };
   
   export default Component;
   

2. 确认组件挂载与状态依赖

   • 检查Component是否被正确包含在App组件中，没有被条件渲染逻辑意外卸载。
   • 打开浏览器控制台，查看添加的日志是否在状态更新时输出新值，确认Redux状态确实传递到了组件。

3. 检查React.memo（若使用）
   如果Component被React.memo包裹，确保依赖的状态是浅可比较的。Redux Toolkit的状态更新都是不可变操作，只要选择的状态值发生变化，memo会正确触发组件重新渲染。

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