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