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

Question

我正在关注这个video来学习redux。

我的 addItem 动作分派不起作用，但 getItem 动作分派有效。 Axios 发布工作，数据被添加到数据库，但调度不起作用，所以列表没有更新。仅当我在列表更新时刷新页面时。 Api 也是正确的，并且在 Postman 的检查中会出现所需的响应。

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
        })
    );
};

路由器.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('/',(req,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);

Answer 1

添加项目后无需调度任何操作，只需获取整个列表以更新商店并重新渲染组件。

更新：请检查 ItemModal onSubmit 功能。检查 sanbox 以供参考。 https://codesandbox.io/s/list-renderer-gm7hi

itemActions.js

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

路由器.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('/',(req,res)=>{
    const newItem = new Item({
        name:req.body.name
    });
    newItem.save().then(()=>res.status(200));
});

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
        };
      
        default: return state
    }
};

export default itemReducer

ItemModal.js

（表单提交）假设您已经为输入创建了状态

import { getItems} from '../actions/itemActions';
import axios from 'axios';
     
onSubmit = e => {
            e.preventDefault();
            axios
              .post("/api/items", {
                 name: this.state.newItem
               })
              .then(() => this.props.getItems());
            // Close modal
            this.toggle();
        };

(dispatch) 不需要定义额外的函数

export default connect(
    null,
    { getItems }
)(ItemModal);

让我知道它是否有效。