React+Redux中TypeError: state.codes不可迭代错误排查求助

错误根源 #

1. 初始状态不匹配：BarcodeScanner组件中使用的initialState仅包含code: ''，没有codes数组字段。当dispatchADD_CODE动作时，reducer尝试展开state.codes，但此时state.codes是undefined，并非可迭代的数组，因此触发错误。
2. 状态未共享：BarcodeScanner和ScannerResultTable各自实例化了独立的useReducer状态，两者的state完全隔离，即使修复初始状态，ScannerResultTable也无法获取到BarcodeScanner中添加的codes数据。

修复步骤 #

1. 统一初始状态 #

确保所有使用该reducer的组件，初始化时都包含codes数组。可以复用File2中的initialState：

// File1.js
import { reducer, initialState } from './File2';

function BarcodeScanner() {
  // 使用统一的initialState
  const [state, dispatch ] = useReducer(reducer, initialState);

  function handleScan(code){
    dispatch({
      type: 'ADD_CODE',
      payload: { code },
    });
  }
  // ... 组件其他逻辑
}

2. 共享状态（核心需求） #

要让两个组件共享codes数据，需要将reducer状态提升到共同的父组件，或使用React Context实现全局状态共享：

步骤1：创建ScannerContext

// ScannerContext.js
import { createContext, useContext, useReducer } from 'react';
import { reducer, initialState } from './File2';

const ScannerContext = createContext();

export function ScannerProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <ScannerContext.Provider value={{ state, dispatch }}>
      {children}
    </ScannerContext.Provider>
  );
}

export function useScanner() {
  return useContext(ScannerContext);
}

步骤2：用Provider包裹组件

在两个组件的共同父组件中，使用ScannerProvider包裹：

// ParentComponent.js
import { ScannerProvider } from './ScannerContext';
import BarcodeScanner from './File1';
import ScannerResultTable from './File2';

export default function ParentComponent() {
  return (
    <ScannerProvider>
      <BarcodeScanner />
      <ScannerResultTable />
    </ScannerProvider>
  );
}

步骤3：修改组件使用共享状态

// File1.js
import { useScanner } from './ScannerContext';

function BarcodeScanner() {
  // 从Context获取dispatch
  const { dispatch } = useScanner();

  function handleScan(code){
    dispatch({
      type: 'ADD_CODE',
      payload: { code },
    });
  }
  // ... 组件其他逻辑
}

// File2.js
import { useScanner } from './ScannerContext';
import { useEffect, useState } from 'react';

export const reducer = (state, action) => {
  if (action.type === 'ADD_CODE') {
    return {
      ...state,
      codes: [...state.codes, action.payload.code],
    };
  }
  return state;
};

const initialState = { codes: [] };

export default function ScannerResultTable() {
  // 从Context获取共享状态
  const { state } = useScanner();
  const [_codeData, setCodeData] = useState([]);

  useEffect(() => {
    setCodeData([...state.codes]);
  }, [state.codes]);
  // ... 组件其他逻辑
}

额外优化 #

如果_codeData只是state.codes的副本，没有额外处理逻辑，可以直接使用state.codes，省去useState和useEffect：

// ScannerResultTable.js中简化
export default function ScannerResultTable() {
  const { state } = useScanner();
  // 直接使用state.codes即可
  const _codeData = state.codes;
  // ... 组件其他逻辑
}

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