Question

我正在关注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('/',(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
            })
         )
  };

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('/',(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();
        };

（调度）不需要定义额外的功能

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

让我知道它是否有效。

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

1 个答案: