React-Redux：未正确触发操作 ADD_ITEMimport { GET_ITEMS, ADD_ITEM, DELETE_ITEM, ITEMS_LOADING } from '../actions/types'; const initialState = { items: [], loading: false }; export default function(state = initialState, action) { cons

如何解决React-Redux：未正确触发操作 ADD_ITEMimport { GET_ITEMS, ADD_ITEM, DELETE_ITEM, ITEMS_LOADING } from '../actions/types'; const initialState = { items: [], loading: false }; export default function(state = initialState, action) { cons

我正在尝试学习 MERN 堆栈，并且正在经历 this tutorial on YouTube。我被困在 Ep 中。 7. 我认为的问题是我的 signal 操作永远不会被触发，因此状态永远不会更新，我必须重新加载页面才能看到任何项目添加。 ADD_ITEM 操作正常工作，因此我怀疑从模式中的表单调用 DELETE_ITEM 操作可能存在问题，但我不确定。

刷新页面、删除 2 项并尝试添加 1 项后我的 Redux DevTools 图片：

ADD_ITEM

itemReducer.js

import { GET_ITEMS,ADD_ITEM,DELETE_ITEM,ITEMS_LOADING } from '../actions/types'; const initialState = { items: [],loading: false }; export default function(state = initialState,action) { console.log(action.type); switch(action.type) { case GET_ITEMS: return { ...state,items: action.payload,loading: false }; case ADD_ITEM: return { ...state,items: [action.payload,...state] }; case DELETE_ITEM: return { ...state,items: state.items.filter(item => item._id !== action.payload) }; case ITEMS_LOADING: return { ...state,loading: true }; default: return state; } }

ItemModal.js

itemActions.js

import React,{ Component } from 'react';
import { Button,Modal,ModalHeader,ModalBody,Form,FormGroup,Label,Input } from 'reactstrap';
import { connect } from 'react-redux';
import { addItem } from '../actions/itemActions';

class ItemModal extends Component {
  state = {
    modal: false,name: ''
  }

  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  }

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }

  onSubmit = (e) => {
    e.preventDefault();

    const newItem = {
      name: this.state.name
    }

    this.props.addItem(newItem);

    this.toggle();
  }

  render() {
    return(
      <div>
        <Button
          color="dark"
          style={{marginBotton: '2rem'}}
          onClick={this.toggle}
        >Add Item</Button>

        <Modal
          isOpen={this.state.modal}
          toggle={this.toggle}
        >
          <ModalHeader
            toggle={this.toggle}
          >
            Add To Shopping List
          </ModalHeader>

          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              <FormGroup>
                <Label for="item">Item</Label>
                <Input
                  type="text"
                  name="name"
                  id="item"
                  placeholder="Add shopping item"
                  onChange={this.onChange}
                />
              </FormGroup>
              <Button
                  color="dark"
                  style={{marginTop: '2rem'}}
                  block
                >Submit</Button>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  item: state.item
});

export default connect(mapStateToProps,{ addItem })(ItemModal);