Question

我已经将数据存储在saga文件的数组中，现在我想将数据添加到列表中

有一个静态数据，其中的数据使用redux-saga保存在saga文件中，而我使用的是npm的react-strap和mui数据表包

import React, { Component } from "react";
import { loaddata } from "Actions/TableAction";
import { connect } from "react-redux";
import MUIDataTable from "mui-datatables";
import {Button, Modal, ModalHeader, ModalBody, ModalFooter , Row ,Label,Input,ButtonGroup ,Table } from 'reactstrap'
class TableComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      tablelist: [],
      addModal: false,
    editModal:false,
    deleteModal:false,
    items="",
    Name:"",
    Address:"",
    Pincode:""
    };
    this.addtoggle = this.addtoggle.bind(this);
    this.edittoggle = this.edittoggle.bind(this);
    this.deletetoggle = this.deletetoggle.bind(this);
    this.adddata =this.adddata.bind(this);

  }

  componentWillMount() {
    this.props.loaddata();
  }
  componentWillReceiveProps(nextProps) {
    console.log(nextProps);
    this.setState({
      tablelist: nextProps.tableData
    });
  }
  addtoggle() {
    this.setState({
      addModal: !this.state.addModal,
      editModal:false,
      deleteModal:false,
    });
  }
  adddata(data) {
    this.setState({
      [data.target.name]: data.target.value,
    });
  }
  addtoggleData() {
    const {
      Name,
      Address,
      Pincode
    } = this.state;
    this.props.addData({
    Name,
    Address,
    Pincode
    })
  }
  edittoggle() {
    this.setState({
      editModal: !this.state.editModal,
      addModal: false,
      deleteModal:false
    });
  }
  deletetoggle() {
    this.setState({
      deleteModal: !this.state.deleteModal,
      editModal: false,
      addModal: false
    });
  }
  handleAdd = () => {
    var newItems = this.state.items.concat(
      [ ]
    );
    this.setState({ items: newItems });
  }

  render() {
    const columns = [
      {
          name:"Sr",
          options: { sort: true, filter: false }
      },
      {
        name:"Name",
        options: { sort: true, filter: false }
      },
      {
        name:"Address",
        options: { sort: true, filter: false }
      },
      {
        name:"Pincode",
        options: { sort: true, filter: false }
      },
      {
        name:"Actions",
        options: { sort: true, filter: false }
      },
    ];

    const options = {
      filterType: "multiselect",
      responsive: "scroll",
      filter: true,
      download: true,
      viewColumns: false,
      print: true,
      customToolbar: () => {
        return (
          <div>
          <Button
            // component={Link}
            // to="/src/adduser"
             variant="raised"
             className="btn-primary text-white"
             onClick={this.addtoggle}
          >
            Add Data
          </Button>


          </div>
        );
      }
  };
  const {Name , Address , Pincode} = this.state
    return (
      <div >
        <MUIDataTable
          title={"Data List"}
          data={this.props.tableData}
          columns={columns}
          options={options}
        />
       <Table dark>
          <tbody>
          <Row>

         {/* For Adding the Data: */}
       <Modal isOpen={this.state.addModal} toggle={this.addtoggle} className={this.props.className}>
       <ModalHeader toggle={this.addtoggle} >Add Item</ModalHeader>
          <ModalBody>
          <Label for="Name">Name</Label>
          <Input type="name" name="Name" value={Name} id="Name" placeholder="Enter the Name"  onChange={this.adddata}/>

          <Label for="Address">Address</Label>
          <Input type="textarea" name="Address" id="Address" value={Address} placeholder="enter a Valid Address" onChange={this.adddata} />

          <Label for="Pincode">Pincode</Label>
          <Input type="integer" name="Pincode" id="Pincode" value={Pincode} placeholder="Enter the pincode here" onChange={this.adddata} />

          </ModalBody>
          <ModalFooter>
            <Button color="success" onClick={this.addtoggleData}>Add Data</Button>{' '}
            <Button color="danger" onClick={this.addtoggle}>Cancel</Button>
          </ModalFooter>
       </Modal>
     </Row>
          </tbody>

          </Table>
      </div>
    );
  }
}

const mapStateToProps = ({ dataShow }) => {
  const { tableData } = dataShow;
  return { tableData };
};

export default connect(
  mapStateToProps,
  { loaddata }
)(TableComponent);

我希望添加数据并将其显示在我的表格中

数组如下

import { put, fork, takeEvery, all } from "redux-saga/effects";

import { LOAD_DATA } from "Actions/types";
import { loaddataSuccess } from "Actions/TableAction";
export const data = [
  [
   "1",
   "Karan",
   "Ahmedabad",
    "364001"
  ],
  [
    "2",
    "Parth",
    "Bhavnagar",
    "364002"
  ],
  [
    "3",
    "Bharat",
    "Agra",
    "356987"
  ],
  [
    "4",
    "Raj",
    "Surat",
    "147852"
  ],
  [
    "5",
    "Harshil",
    "vadodara",
    "369852"
  ],
  [
    "6",
    "Dharmil",
    "Gandhinagar",
    "214563"
  ],
  [
    "7",
    "Brahmabhai",
    "Kutchh",
    "365325"
  ],
  [
    "8",
    "Sanjaybhai",
    "Ahmedabad",
    "382315"
  ],
];

export function* getstaticdata() {
  yield put(loaddataSuccess(data));
}

export function* getData() {
  yield takeEvery(LOAD_DATA, getstaticdata);
}
export default function* rootSaga() {
  yield all([fork(getData)]);
}

Reducer

import { LOAD_DATA, DATA_LOAD_SUCCESS , ADD_DATA , ADD_DATA_SUCCESS , UPDATE_DATA , UPDATE_DATA_SUCCESS} from "Actions/types";

const INIT_STATE = {
  tableData: [],
  loading: false
};

export default (state = INIT_STATE, action) => {
  switch (action.type) {





case LOAD_DATA:
      console.log("Reducer For Request");
      return { ...state, loading: true, tableData: [] };


case DATA_LOAD_SUCCESS:
  console.log("Reducer For Responce",action.payload);
  return { ...state, loading: false, tableData: action.payload };

case ADD_DATA:
  return { ...state , loading:false ,tableData: [] };

case ADD_DATA_SUCCESS:
  return { ...state , loading:false , tableData: action.payload }

   case UPDATE_DATA:
   return { ...state , loading:false ,tableData: [] };

 case UPDATE_DATA_SUCCESS:
   return { ...state , loading:false , tableData: action.payload }

default:
  return { ...state };

} };

Answer 1

您更新了状态但不使用它，

this.setState({
  tablelist: nextProps.tableData
});

为什么！？

在mui中，道具数据直接来自道具- this.props.tableData 。

显然，问题在于更新reduser存储。

显示“ Actions / TableAction”中的代码loaddataSuccess函数

我如何在我的代码中使用Saga在数组中添加数据

1 个答案: