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

Question

I'm trying since a few hours and still getting the same error "TypeError: state.codes is not iterable" when declaring the reducer

The idea behind my file is to pass a value (code) for ex. '12345' with dispatch into the reducer and be able to update an array _codeData every time when a new dispatch has taken place.

anyone have any idea?

thanks in advance:),

File1.js

function BarcodeScanner() {

  const initialState = {
    code: ''
  };

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

  function handleScan(code){

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

File2.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

I guess you're trying to spread an undefined or null value. To solve this issue you can use the Logical OR operator.

PS: If the value was always null/undefined, ensure your reducer is working correctly first.

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]);