为什么我在 React 和 redux 上收到此错误“TypeError: state is not iterable”

Question

几个小时后我一直在尝试，但在声明减速器时仍然遇到相同的错误“TypeError：state.codes is not iterable”

我的文件背后的想法是为 ex 传递一个值（代码）。 '12345' 分配到 reducer 中，并且每次发生新的分配时都能够更新数组 _codeData。

有人知道吗？

提前致谢：），

文件1.js

function BarcodeScanner() {

  const initialState = {
    code: ''
  };

  const [state, dispatch ] = useReducer(reducer, initialState);

  function handleScan(code){

    dispatch({
      type: 'ADD_CODE',
      payload: {
        code,
      },
    });
  }

文件2.js

const initialState = {
    codes: []
};

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

export default function ScannerResultTable() {
    
    const [state, dispatch] = useReducer(reducer, initialState);
    const [_codeData, setCodeData] = useState([]);

    useEffect(() => {
        setCodeData([...state.codes]);
    }, [state.codes]);

Answer 1

我猜您正在尝试传播未定义或 null 值。 要解决此问题，您可以使用逻辑或运算符。

PS：如果该值始终为 null/undefined，请首先确保您的 reducer 正常工作。

const initialState = {
    codes: []
};

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

export default function ScannerResultTable() {
    
    const [state, dispatch] = useReducer(reducer, initialState);
    const [_codeData, setCodeData] = useState([]);

    useEffect(() => {
        setCodeData([(...state?.codes || [])]);
    }, [state.codes]);