无法在 use 中调度操作效果反应钩子



>我在功能组件中使用 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
}

您导入的命名导出不正确。

您的代码:import getAllItem from './actions/item'

正确导入:import {getAllItem} from './actions/item'

相关内容

  • 没有找到相关文章

最新更新