Question

在功能组件的useEffect内部分派动作时出现问题

在类组件中看起来像这样

import getAllItem from './actions/item'

export class Home extends Component {

  state = {   menus: []  }

  componentDidMount() {
    this.props.dispatch(getAllItem())
    this.setState({ menus: this.props.menu })
   })
  }

...
...

const mapStateToProps = state => {
  return { menu: state.reItem.itemList}
}
export default connect(mapStateToProps)(Home);

在控制台中，它返回我的菜单数组

我想将其转换为功能组件，并且我已经尝试过

import getAllItem from './actions/item'

export default function Home() {
  const dispatch = useDispatch();
  const menuState = useSelector(state => state.reItem.itemList)
  const [menus, setMenus] = useState();

   useEffect(() => {
     dispatch(getAllItem())
     setMenus(menuState);
   }, [])
...
...

我希望我的功能组件具有与类组件相同的结果，但是在控制台中它会返回 “ TypeError：（0，_item.default）不是函数”

我的操作代码很简单

export const getAllItem = () => {
    return {
        type: 'GET_ITEM',
        payload: Axios.get(`${URL}/item/`)
    }
}

和减速器

const initialState = {
    itemList: []
}

const item = (state = initialState, action) => {
    switch (action.type) {
        case 'GET_ITEM':
            return {
                ...state,
                itemList: action.payload.data.result
            }

无法在useEffect反应挂钩内调度动作

0 个答案: