Question

我正在学习React和Redux，我已经成功实现了read操作并在表中放置了数据，现在我正在尝试使用表单实现add操作，这使我出错命名映射不是函数。这是我的postReducer.js文件

var initialState = {
  employees: [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}] 
};

var postReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'ADD_POST':
        return state.employees.push(action.data);
      default:
        return state;
    }
  };


export default postReducer;

这是我的table.js文件

import React, {Fragment} from "react";
import { connect } from "react-redux";

class Table extends React.Component {
    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                <tbody>
                {this.props.employees.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>{item.email}</td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

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

export default connect(mapStateToProps)(Table);

请注意，没有问题table.js文件

这是我的form.js文件

import React, { Fragment } from "react"
import { connect } from 'react-redux'

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: '', age: '', email: ''};
        this.onHandleChange = this.onHandleChange.bind(this);
        this.submit = this.submit.bind(this);
    }

    submit(event) {
        const data = {
            name: this.state.name, age: this.state.age, email: this.state.email
        };
        this.props.dispatch({type: 'ADD_POST', data})
    }

    onHandleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }


    render() {
        return (
            <form>
                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.name} name="name" type="text" />
                </div>

                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.age} name="age" type="number"/>
                </div>

                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.email}  name="email" type="text"/>
                </div>

                <button onClick={(event) => this.submit(event)} type="button">SAVE</button>

            </form>
        );
    }
}

export default connect(null)(Form);

我不确定form.js文件有问题，

这是App.js文件

import React from "react"
import Table from "./table"
import Form from '../components/form'

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <React.Fragment>   
              <Form />          
            <table>
                <Table />
            </table>
            </React.Fragment>
        );
    }
}
export default App;

有人可以帮助我修改我的添加表格吗？我想在提交数据时将数据显示在表上。目前，该表显示了硬编码数据，但是现在我想要，该表应同时包含硬编码数据和表单提交的数据。有人可以帮我吗？

Answer 1

在化简器中，您不应推动状态，因为这会使其变异。相反，您应该使用价差运算符创建一个新列表并添加该商店。

var postReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'ADD_POST':
      // return state.employees.push(action.data);
      return {
        ...state,
        employees: [...state.employees, action.data],
      }
    default:
      return state;
  }
};

React-Redux创建操作因表单失败

1 个答案: