Question

我正在用react-redux编写一个Crud应用程序，我已经成功实现了read和add操作，当我单击edit时，我也处于update操作的一半按钮，我将数据填入表格，只有更新操作有问题。我对update和add使用相同的表单我只遇到问题dispatching更新数据，它在表中显示更新数据。

这是我的form.js文件：

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

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: this.props.selectedData.name, age: this.props.selectedData.age, email: this.props.selectedData.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
        });
    }

    componentDidUpdate(prevProps){
        if(prevProps.selectedData.email !== this.props.selectedData.email){  //Check on email, because email is unique
          this.setState({name: this.props.selectedData.name, age: this.props.selectedData.age, email: this.props.selectedData.email})
        }
     }



    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">
                    {this.props.isEdit ? 'Update' : 'SAVE' }
                </button>

            </form>
        );
    }
}

export default connect(null)(Form);

这是table.js文件

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

class Table extends React.Component {
    onEdit = (item) => {  //Use arrow function to bind `this`
        this.props.selectedData(item);
    }
    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Email</th>
                        <th>Edit</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>
                        <td>
                            <button
                                type="button"
                                onClick={() => this.onEdit(item)}>EDIT
                            </button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

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

export default connect(mapStateToProps)(Table);

这是我的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: [...state.employees, action.data],
        };
      case 'EDIT_POST':
        //return
      default:
        return state;
    }
  };


export default postReducer;

这是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 = {
           selectedData: {name: '', age: '', email: ''},
           isEdit: false
        };
    }

    selectedData = (item) => {
       this.setState({selectedData: item,isEdit:true})
    }
    render() {
        return (
            <React.Fragment>   
              <Form selectedData={this.state.selectedData} isEdit={this.state.isEdit}/>          
            <table>
                <Table selectedData={this.selectedData} />
            </table>
            </React.Fragment>
        );
    }
}
export default App;

这是我的index.js文件：

import React from "react";
import ReactDOM from "react-dom";

import App from "./components/App";

import { Provider } from 'react-redux'

import { createStore } from 'redux'
import postReducer from '../src/postReducer'

const store = createStore(postReducer)


ReactDOM.render((
  <Provider store={store}>
      <App />
  </Provider>
), document.getElementById('app'))

除更新操作外，其他所有功能都工作正常，有人可以帮助我实现更新操作吗？我尝试了很多，但未能实现。

Answer 1

要能够编辑员工，您需要一些固定的数据。

例如employee.id

基于此，您可以查找员工，并使其余属性可编辑。

我在您的postReducer中添加了它：

case 'EDIT_POST':
  return {
    ...state,
    employees: state.employees.map(emp => emp.id === action.data.id ? action.data : emp)
  }

工作Stackblitz。

更新操作的React-Redux问题

1 个答案: