Reactjs 对删除操作的React redux问题作出反应

我正在用react-redux编写一个crud应用程序，我已经成功地完成了

读取

，

创建

，和

更新

，现在我正在尝试学习实现

删除

操作，我发现这是一个棘手的操作，尽管它是最简单的操作

这是我的

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);
    }

    onDelete = (index) => {
        this.props.selectedData(index);
    }
    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>
                            <button
                                onClick={ () => this.onDelete(index) }>DELETE
                            </button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

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

export default connect(mapStateToProps)(Table);

var initialState = {
  employees: [
    { id: 1, name: 'jhon', age: '23', email: 'a@a' }, 
    { id: 2, 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 {
        ...state,
        employees: state.employees.map(emp => emp.id === action.data.id ? action.data : emp)
      };
    case 'DELETE_POST':
      return state.filter((post)=>post.id !== action.id);
    default:
      return state;
  }
};


export default postReducer;

import React from "react"
import Table from "../components/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;

这是我的

postReducer.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);
    }

    onDelete = (index) => {
        this.props.selectedData(index);
    }
    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>
                            <button
                                onClick={ () => this.onDelete(index) }>DELETE
                            </button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

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

export default connect(mapStateToProps)(Table);

var initialState = {
  employees: [
    { id: 1, name: 'jhon', age: '23', email: 'a@a' }, 
    { id: 2, 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 {
        ...state,
        employees: state.employees.map(emp => emp.id === action.data.id ? action.data : emp)
      };
    case 'DELETE_POST':
      return state.filter((post)=>post.id !== action.id);
    default:
      return state;
  }
};


export default postReducer;

import React from "react"
import Table from "../components/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;

这是

App.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);
    }

    onDelete = (index) => {
        this.props.selectedData(index);
    }
    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>
                            <button
                                onClick={ () => this.onDelete(index) }>DELETE
                            </button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

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

export default connect(mapStateToProps)(Table);

var initialState = {
  employees: [
    { id: 1, name: 'jhon', age: '23', email: 'a@a' }, 
    { id: 2, 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 {
        ...state,
        employees: state.employees.map(emp => emp.id === action.data.id ? action.data : emp)
      };
    case 'DELETE_POST':
      return state.filter((post)=>post.id !== action.id);
    default:
      return state;
  }
};


export default postReducer;

import React from "react"
import Table from "../components/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;

从“React”导入React
从“./组件/表格”导入表格
从“../components/Form”导入表单
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
所选数据：{姓名：''，年龄：''，电子邮件：'}，
isEdit:错
};
}
selectedData=（项目）=>{
this.setState（{selectedData:item，isEdit:true}）
}
render（）{
返回(
);
}
}
导出默认应用程序；

这是我的index.js文件：

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

import App from "../src/components/App";

import { Provider } from 'react-redux'

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

const store = createStore(postReducer)


// if we don't subcribe, yet our crud operation will work
function onStateChange() {
  const state = store.getState();
  console.log(JSON.stringify(state, null, 2));
}

store.subscribe(onStateChange)

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

从“React”导入React；
从“react dom”导入react dom；
从“./src/components/App”导入应用程序；
从“react redux”导入{Provider}
从“redux”导入{createStore}
从“../src/postReducer”导入postReducer
常量存储=创建存储（postReducer）
//如果我们不订阅，我们的crud操作就会起作用
函数onStateChange（）{
const state=store.getState（）；
log（JSON.stringify（state，null，2））；
}
store.subscribe（onStateChange）
ReactDOM.render((
)，document.getElementById（'app'））

除了删除操作，一切都很好，有人能帮我实现删除操作吗？我没能实现删除操作，如果有人能修复我的删除操作，我将不胜感激

---

谢谢

我在这里想的是，由于比较肤浅，redux更新似乎不起作用。像这样试试

return {
    ...state,
    employees: state.filter((post)=>post.id !== action.id);
  };

---

你能给出一个错误的小例子吗？你得到的错误是什么？你从不从上面的代码中发送

DELETE\u POST

操作。您尝试了什么？

返回state.filter（（post）=>post.id！==action.id）

应该

返回{…state，employees:state.employees.filter（（post）=>post.id！==action.id）}

在reducerNot中还不起作用，我不知道为什么不起作用，调度有问题，你能检查调度吗？这个.props.dispatch（{type:'DELETE_POST'，id}）需要调用这个函数当你触发删除按钮时，在这里传递POST的id请让我知道问题是否存在是的，我做了但不起作用。。onDelete=（项）=>{const data={id:this.props.selectedData（项），}this.props.dispatch（{type:'DELETE_POST'，data}）；}