如何使用'Redux'從'React'中的表中刪除項目

本質上，此時應用程序在保存到數據庫的視圖中顯示「學生」列表 - 現在我希望能夠刪除一個學生，並堅持下去。我相信答案在於組件本身。如何使用'Redux'從'React'中的表中刪除項目

這裏是我迄今爲止，這是我的學生組成：

import React, { Component } from "react"; 
import store from "../store"; 
import { scrubStudent } from "../reducers"; 

export default class Students extends Component { 
    constructor(props) { 
    super(props); 
    this.state = store.getState(); 
    this.deleteStudent = this.deleteStudent.bind(this); 
    } 

    deleteStudent(itemIndex) { 
    console.log(this.state); 
    var students = this.state.students; 
    store.dispatch(scrubStudent(this.state)); 
    students.splice(itemIndex, 1); 
    this.setState({ 
     students: students 
    }); 
    } 

    render() { 
    var students = this.props.students; 
    return (
     <div className="container"> 
     <div className="sixteen columns"> 
      <h1 className="remove-bottom">Students</h1> 
      <h5>List of current students and their campus</h5> 
      <hr /> 
     </div> 
     <div className="sixteen columns"> 
      <div className="example"> 
      <div> 
       <table className="u-full-width"> 
       <thead> 
        <tr> 
        <th>#</th> 
        <th>Name</th> 
        <th>Email</th> 
        <th>Campus</th> 
        </tr> 
       </thead> 
       <tbody> 
        {students.map(function(student, index) { 
        return (
         <tr key={index}> 
         <td> 
          {student.id} 
         </td> 
         <td> 
          {student.name} 
         </td> 
         <td> 
          {student.email} 
         </td> 
         <td> 
          {student.campus} 
         </td> 
         <td> 
          <a 
          className="button button-icon" 
          onClick={this.deleteStudent(index)} 
          > 
          <i className="fa fa-remove" /> 
          </a> 
         </td> 
         </tr> 
        ); 
        })} 
       </tbody> 
       </table> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}

現在我得到index.js:90 TypeError: Cannot read property 'deleteStudent' of undefined

提前感謝！

UPDATE

基於馬修的建議，我尋求指導意見（我在學校）從一個老師，他幫我連線如下：

但現在我收到以下錯誤：

`index.js:90 TypeError: Cannot read property 'setState' of undefined`

我將深入挖掘原因！

import React, { Component } from "react"; 
import store from "../store"; 
import { deleteStudent } from "../reducers"; 

export default class Students extends Component { 
    constructor(props) { 
    super(props); 
    this.state = store.getState(); 
    this.deleteStudent = this.deleteStudent.bind(this); 
    } 

    componentDidMount() { 
    this.unsubscribe = store.subscribe(function() { 
     this.setState(store.getState()); 
    }); 
    } 

    componentWillUnmount() { 
    this.unsubscribe(); 
    } 

    deleteStudent(index) { 
    console.log(this.state); 
    var students = this.state.students; 
    store.dispatch(deleteStudent(index)); 
    this.state = store.getState(); 
    } 

    render() { 
    var students = this.props.students; 
    return (
     <div className="container"> 
     <div className="sixteen columns"> 
      <h1 className="remove-bottom">Students</h1> 
      <h5>List of current students and their campus</h5> 
      <hr /> 
     </div> 
     <div className="sixteen columns"> 
      <div className="example"> 
      <div> 
       <table className="u-full-width"> 
       <thead> 
        <tr> 
        <th>#</th> 
        <th>Name</th> 
        <th>Email</th> 
        <th>Campus</th> 
        </tr> 
       </thead> 
       <tbody> 
        {students.map(function(student, index) { 
        return (
         <tr key={index}> 
         <td> 
          {student.id} 
         </td> 
         <td> 
          {student.name} 
         </td> 
         <td> 
          {student.email} 
         </td> 
         <td> 
          {student.campus} 
         </td> 
         <td> 
          <a 
          className="button button-icon" 
          onClick={() => this.deleteStudent(student.id)} 
          key={index} 
          > 
          <i className="fa fa-remove" /> 
          </a> 
         </td> 
         </tr> 
        ); 
        }, this)} 
       </tbody> 
       </table> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}

這是我的減速器：

import { combineReducers } from "redux"; 
import axios from "axios"; 

// INITIAL STATE 

const initialState = { 
    students: [], 
    campuses: [] 
}; 

//ACTION CREATORS 

const UPDATE_NAME = "UPDATE_NAME"; 
const ADD_STUDENT = "ADD_STUDENT"; 
const DELETE_STUDENT = "DELETE_STUDENT"; 
const GET_STUDENTS = "GET_STUDENTS"; 
const UPDATE_CAMPUS = "UPDATE_CAMPUS"; 
const GET_CAMPUS = "GET_CAMPUS"; 
const GET_CAMPUSES = "GET_CAMPUSES"; 

// ACTION CREATORS 

export function updateName(name) { 
    const action = { 
    type: UPDATE_NAME, 
    name 
    }; 
    return action; 
} 

export function addStudent(student) { 
    return { 
    type: ADD_STUDENT, 
    student 
    }; 
} 

export function scrubStudent(student) { 
    return { 
    type: DELETE_STUDENT, 
    student 
    }; 
} 

export function getStudents(students) { 
    const action = { 
    type: GET_STUDENTS, 
    students 
    }; 
    return action; 
} 

export function updateCampus(campus) { 
    const action = { 
    type: UPDATE_CAMPUS, 
    campus 
    }; 
    return action; 
} 

export function getCampus(campus) { 
    const action = { 
    type: GET_CAMPUS, 
    campus 
    }; 
    return action; 
} 

export function getCampuses(campuses) { 
    const action = { 
    type: GET_CAMPUSES, 
    campuses 
    }; 
    return action; 
} 

//THUNK CREATORS 

export function fetchStudents() { 
    return function thunk(dispatch) { 
    return axios 
     .get("/api/students") 
     .then(function(res) { 
     return res.data; 
     }) 
     .then(function(students) { 
     return dispatch(getStudents(students)); 
     }) 
     .catch(function(err) { 
     return console.error(err); 
     }); 
    }; 
} 

export function postStudent(student) { 
    return function thunk(dispatch) { 
    return axios 
     .post("/api/students", student) 
     .then(function(res) { 
     return res.data; 
     }) 
     .then(function(newStudent) { 
     return dispatch(addStudent(newStudent)); 
     }) 
     .catch(function(err) { 
     return console.error(err); 
     }); 
    }; 
} 

export function deleteStudent(student) { 
    return function thunk(dispatch) { 
    return axios 
     .delete("/api/students/" + student.toString()) 
     .then(function(res) { 
     return res.data; 
     }) 
     .then(function(student) { 
     return dispatch(scrubStudent(student)); 
     }) 
     .catch(function(err) { 
     return console.error(err); 
     }); 
    }; 
} 

export function fetchCampuses() { 
    return function thunk(dispatch) { 
    return axios 
     .get("/api/campuses") 
     .then(function(res) { 
     return res.data; 
     }) 
     .then(function(campuses) { 
     return dispatch(getCampuses(campuses)); 
     }) 
     .catch(function(err) { 
     return console.error(err); 
     }); 
    }; 
} 

export function postCampus(student) { 
    return function thunk(dispatch) { 
    return axios 
     .post("/api/campuses", campuse) 
     .then(function(res) { 
     return res.data; 
     }) 
     .then(function(newCampus) { 
     return dispatch(getCampus(newCampus)); 
     }) 
     .catch(function(err) { 
     return console.error(err); 
     }); 
    }; 
} 

// REDUCER 

const rootReducer = function(state = initialState, action) { 
    var newState = Object.assign({}, state); 

    switch (action.type) { 
    case GET_STUDENTS: 
     newState.students = state.students.concat(action.students); 
     return newState; 

    case ADD_STUDENT: 
     newState.students = state.students.concat([action.student]); 
     return newState; 

    case DELETE_STUDENT: 
     newState.students = state.students.concat([action.student]); 
     return newState; 

    case GET_CAMPUSES: 
     newState.campuses = state.campuses.concat(action.campuses); 
     return newState; 

    case GET_CAMPUS: 
     newState.campuses = state.campuses.concat([action.campus]); 
     return newState; 

    default: 
     return state; 
    } 
}; 

export default rootReducer;

來源

2017-09-01 Antonio Pavicevac-Ortiz

下面的答案直接回答了你爲什麼會收到錯誤，但通過閱讀代碼，你錯過了Redux的基本點之一...... **關注點分離**請參閱我的答案以獲得一些相關信息https： //stackoverflow.com/questions/45936949/redux-removing-object-from-array-nested-in-another-array/45939438#45939438 –

@MatthewBrent事實上 - 當我測試了這個過程，我達到了最大的調用堆棧，所有的事情都是一團糟！謝謝你的鏈接。 –

@ AntonioPavicevac-Ortiz你檢查了我的答案嗎？你還有問題嗎？ – Dekel

您應該使用箭頭功能，以保持在地圖功能的相關背景：

{students.map((student, index) => {

這樣，當您使用this內該功能 - 這是您當前的組件。

來源

2017-09-01 00:21:27 Dekel

如何使用'Redux'從'React'中的表中刪除項目

回答

相關問題