为什么我的axios POST调度不起作用？

问题描述

我正在关注video来学习还原。

我的addItem操作分派不起作用，但是getItem操作分派起作用。 Axios发布工作，并且数据已添加到数据库，但调度不起作用，因此列表未更新。仅当列表更新时我刷新页面时。 Api也是正确的，要求邮递员进行检查时会做出回应。

addItem仅在不使用axios且列表已更新以存储在本地存储中时有效。

itemActions.js

export const getItems = () => (dispatch) => {
    dispatch(setItemLoading());
    axios
        .get('/api/items')
        .then(res =>
            dispatch({
                type: GET_ITEMS,payload: res.data
            })
        )
};
export const addItem = item => (dispatch) => {
    axios.post('/api/items',item).then(res =>
        dispatch({
            type: ADD_ITEM,payload: res.data
        })
    );
};

router.js

//@route GET api/items
router.get('/',(req,res)=>{
    Item.find().sort({date:-1}).then(items=>res.json(items))
});


//@route POST api/items
router.post('/',res)=>{
    const newItem = new Item({
        name:req.body.name
    });
    newItem.save().then(item=>res.json(item));
});

module.exports = router;

ItemReducer.js

    const initialState={
        items:[],loading:false
    };

const itemReducer = (state = initialState,action) => {
    switch(action.type) {
        case GET_ITEMS:
            return {
                ...state,items:action.payload,loading: false
        };

        case ADD_ITEM:
            return {
                ...state,items: [action.payload,...state.items]
            };
      
        default: return state
    }
};

export default itemReducer

itemModal.js

（提交表单）

import { addItem} from '../actions/itemActions';
     
onSubmit = e => {
            e.preventDefault();
            const newItem = {
                name: this.state.name
            };
            // Add item via addItem action
            this.props.addItem(newItem);
            // Close modal
            this.toggle();
        };

（发送）

const mapDispatchToProps = dispatch => ({
    addItem: (item) => dispatch(addItem(item))
});

export default connect(
    null,mapDispatchToProps
)(ItemModal);

ItemList.js（在此处重新列出列表）

import {getItems} from "../actions/itemActions";

class ShoppingList extends Component {
    componentDidMount() {
        this.props.getItems()
    }

    render() {
        const {items}=this.props.item;
        return (
            <Container>
                 <ul>
                        {items.map(({_id,name})=><li key={_id} >
                            <p>{name}&nbsp;</p>
                        </li>)}
                </ul>
            </Container>
        );
    }
}

const mapStateToProps = state =>{
    return{
        item: state.item,}
};


export default connect(mapStateToProps,{getItems})(ItemList);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）