'Redux'を使用して 'React'のテーブルからアイテムを削除する方法

この時点では、基本的に、データベースに保存されたビューの「Students」リストが表示されます生徒にもそのように持続させる。答えはコンポーネント自体にあると私は信じています。今、私は事前にindex.js:90 TypeError: Cannot read property 'deleteStudent' of undefined'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> 
    ); 
    } 
}

：ここ

は、私はこれまで、これは私の学生のコンポーネントである持っているものです！マシューさんの提案に基づいて

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の基本的なポイントの1つが欠落しています。**懸念事項の分離**関連情報https： //stackoverflow.com/questions/45936949/redux-removing-object-from-array-nested-in-another-array/45939438#45939438 –

@MatthewBrent実際、私がこの行動コースをテストしたとき、私は最大のコールスタックに達しました。すべてが骨抜きになった場所！リンクありがとうございました。 –

@ AntonioPavicevac-Ortizあなたは私の答えをチェックしましたか？それでも問題はありますか？ – Dekel

あなたはマップ機能に関連するコンテキストを維持するために、矢印の機能を使用する必要があります：あなたは内部thisを使用する場合

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

この道をこの機能は現在のコンポーネントです。

出典

2017-09-01 00:21:27 Dekel

'Redux'を使用して 'React'のテーブルからアイテムを削除する方法

答えて

関連する問題