Uncaught TypeError: object is not iterable -->using context with reducer

Question

我正在学习一起使用 useContext 和 useReducer，但遇到了一个我还没弄清楚的错误：

Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

它发生在解构 MealItemForm.js 中的上下文之后。我尝试在 createContext 中设置默认值，使用和不使用花括号导入等。我试图在子组件中调度函数。有什么想法吗？

MealItemForm.js

import React,{useContext} from 'react';
import MeatContext from '../store/meat-context';
import Input from './Input';
import styles from "./MealItemForm.module.css"

function MealItemForm(props) {
  
  const [meatState,dispatchMeatState]=useContext(MeatContext)
  const handleClick=(event)=>{
event.preventDefault();

  }  
  
  return (
      <form className={styles.form}>
          <Input/>
          <button onClick={handleClick}>+ Add</button>
      </form>
  );
}

export default MealItemForm;

肉-context.js

import React,{useReducer,useState} from 'react';


const MeatContext = React.createContext({meatState:[]});

export function MeatContextProvider(props) {
  const meatReducer = (state, action) => {
    if (action.type === 'ADD_MEAT') {
      return [...meatState];
    }

    return {  };
  };
  
  const [meatState, dispatchMeatState] = useReducer(meatReducer,
    [

    ]
  );
  return (
<MeatContext.Provider value={{meatState:meatState,dispatchMeatState:dispatchMeatState}}>
  {props.children}
</MeatContext.Provider>
  );

  
}
export default MeatContext

Answer 1

提供给Context的值是一个对象

{meatState:meatState,dispatchMeatState:dispatchMeatState}

但是您在获取值时使用了数组解构

const [meatState, dispatchMeatState ] = useContext(MeatContext)

使用对象解构应该可以解决，

const { meatState, dispatchMeatState } = useContext(MeatContext)

Uncaught TypeError: object is not iterable -->using context with reducer

Uncaught TypeError: object is not iterable -->using context with reducer

javascript

reactjs

use-context