React не может обновить состояние дважды - PullRequest
Новая
       21

React не может обновить состояние дважды

0 голосов
/ 09 апреля 2019

Ребята, я новичок в React и у меня возникают проблемы с обновлением состояния дважды за один вызов.
Я пытаюсь отфильтровать видимые строки в таблице реагирования на основе их пола.

Ниже мое состояние с данными , которые отфильтрованы и обновлены, и резервной копией defaultData для сброса данных. 

this.state = {


  data: [      

    {'id':1,first_name:'Ilka',last_name:'Riddel',email:'iriddel0@blogger.com',gender:'Female'},
    {'id':2,first_name:'Myrwyn',last_name:'Skinner',email:'mskinner1@cmu.edu',gender:'Male'},
    {'id':3,first_name:'Almira',last_name:'Kubu',email:'akubu2@google.ru',gender:'Female'},
    {'id':4,first_name:'Eloisa',last_name:'Maltster',email:'emaltster3@phoca.cz',gender:'Female'},
    {'id':5,first_name:'Vite',last_name:'Capin',email:'vcapin4@noaa.gov',gender:'Male'},
    {'id':6,first_name:'Zelig',last_name:'Crippin',email:'zcrippin5@blogtalkradio.com',gender:'Male'},
    {'id':7,first_name:'Persis',last_name:'Middlemiss',email:'pmiddlemiss6@discovery.com',gender:'Female'},
    {'id':8,first_name:'Amelina',last_name:'Biddy',email:'abiddy7@noaa.gov',gender:'Female'},
    {'id':9,first_name:'Darrell',last_name:'Kemme',email:'dkemme8@clickbank.net',gender:'Male'},
    {'id':10,first_name:'Kerianne',last_name:'Formby',email:'kformby9@berkeley.edu',gender:'Female'}
  ],
  defaultData: [      

    {'id':1,first_name:'Ilka',last_name:'Riddel',email:'iriddel0@blogger.com',gender:'Female'},
    {'id':2,first_name:'Myrwyn',last_name:'Skinner',email:'mskinner1@cmu.edu',gender:'Male'},
    {'id':3,first_name:'Almira',last_name:'Kubu',email:'akubu2@google.ru',gender:'Female'},
    {'id':4,first_name:'Eloisa',last_name:'Maltster',email:'emaltster3@phoca.cz',gender:'Female'},
    {'id':5,first_name:'Vite',last_name:'Capin',email:'vcapin4@noaa.gov',gender:'Male'},
    {'id':6,first_name:'Zelig',last_name:'Crippin',email:'zcrippin5@blogtalkradio.com',gender:'Male'},
    {'id':7,first_name:'Persis',last_name:'Middlemiss',email:'pmiddlemiss6@discovery.com',gender:'Female'},
    {'id':8,first_name:'Amelina',last_name:'Biddy',email:'abiddy7@noaa.gov',gender:'Female'},
    {'id':9,first_name:'Darrell',last_name:'Kemme',email:'dkemme8@clickbank.net',gender:'Male'},
    {'id':10,first_name:'Kerianne',last_name:'Formby',email:'kformby9@berkeley.edu',gender:'Female'}
  ]
};

У меня есть методы-обработчики для фильтрации данных и обновления состояния.

Если они нажмут «Показать всех людей», то функция handleShowOnlyMale отфильтрует данные в состоянии и удалит их.все женщины в данных и когда они щелкают по showAllFemale , таблица будет пуста , поскольку все женщины уже удалены.Я не хочу такого поведения и хочу, чтобы эффект переключения между мужскими и женскими записями в таблице. 

    handleResetData(){
    //console.log(this.state.data);
    this.setState({
        data: this.state.defaultData        
    })
  }

  handleShowOnlyMale(){
    //handleResetData();
    // this.setState((prevState) => {
    //     return {data: prevState.defaultData};
    //   }),
    this.setState({        
        data: this.state.data.filter(person => person.gender === 'Male')
    })    
  }

  handleShowOnlyFemale(){
    //handleResetData();
    // this.setState((prevState) => {
    //     return {data: prevState.defaultData};
    //   }),
    this.setState({        
        data: this.state.data.filter(person => person.gender === 'Female')
    })  
  }

Моя работа заключается в том, чтобы обновлять данные: this.state.defaultData каждый раз перед тем, как они начнут фильтровать.
Как мне сделать это правильно?

НИЖЕ МОЙ ПОЛНЫЙ КОД: 

import React from "react";
import { render } from "react-dom";


// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {


      data: [      

        {'id':1,first_name:'Ilka',last_name:'Riddel',email:'iriddel0@blogger.com',gender:'Female'},
        {'id':2,first_name:'Myrwyn',last_name:'Skinner',email:'mskinner1@cmu.edu',gender:'Male'},
        {'id':3,first_name:'Almira',last_name:'Kubu',email:'akubu2@google.ru',gender:'Female'},
        {'id':4,first_name:'Eloisa',last_name:'Maltster',email:'emaltster3@phoca.cz',gender:'Female'},
        {'id':5,first_name:'Vite',last_name:'Capin',email:'vcapin4@noaa.gov',gender:'Male'},
        {'id':6,first_name:'Zelig',last_name:'Crippin',email:'zcrippin5@blogtalkradio.com',gender:'Male'},
        {'id':7,first_name:'Persis',last_name:'Middlemiss',email:'pmiddlemiss6@discovery.com',gender:'Female'},
        {'id':8,first_name:'Amelina',last_name:'Biddy',email:'abiddy7@noaa.gov',gender:'Female'},
        {'id':9,first_name:'Darrell',last_name:'Kemme',email:'dkemme8@clickbank.net',gender:'Male'},
        {'id':10,first_name:'Kerianne',last_name:'Formby',email:'kformby9@berkeley.edu',gender:'Female'}
      ],
      defaultData: [      

        {'id':1,first_name:'Ilka',last_name:'Riddel',email:'iriddel0@blogger.com',gender:'Female'},
        {'id':2,first_name:'Myrwyn',last_name:'Skinner',email:'mskinner1@cmu.edu',gender:'Male'},
        {'id':3,first_name:'Almira',last_name:'Kubu',email:'akubu2@google.ru',gender:'Female'},
        {'id':4,first_name:'Eloisa',last_name:'Maltster',email:'emaltster3@phoca.cz',gender:'Female'},
        {'id':5,first_name:'Vite',last_name:'Capin',email:'vcapin4@noaa.gov',gender:'Male'},
        {'id':6,first_name:'Zelig',last_name:'Crippin',email:'zcrippin5@blogtalkradio.com',gender:'Male'},
        {'id':7,first_name:'Persis',last_name:'Middlemiss',email:'pmiddlemiss6@discovery.com',gender:'Female'},
        {'id':8,first_name:'Amelina',last_name:'Biddy',email:'abiddy7@noaa.gov',gender:'Female'},
        {'id':9,first_name:'Darrell',last_name:'Kemme',email:'dkemme8@clickbank.net',gender:'Male'},
        {'id':10,first_name:'Kerianne',last_name:'Formby',email:'kformby9@berkeley.edu',gender:'Female'}
      ],


      firstNameSelected: true,
      showMale: true,
      showFemale: true
    };

  }
  handleInputChange(value) {
      console.log(this.state.data);
    this.setState({ firstNameSelected: !this.state.firstNameSelected });
  }

  handleToUpperCaseFirstName(){    
    // this.setState({
    //         data: this.state.data.map(a => a.toUpperCase())
    //     }) 
  }

  handleResetData(){
    //console.log(this.state.data);
    this.setState({
        data: this.state.defaultData        
    })
  }

  handleShowOnlyMale(){
    //handleResetData();
    // this.setState((prevState) => {
    //     return {data: prevState.defaultData};
    //   }),
    this.setState({        
        data: this.state.data.filter(person => person.gender === 'Male')
    })    
  }

  handleShowOnlyFemale(){
    //handleResetData();
    // this.setState((prevState) => {
    //     return {data: prevState.defaultData};
    //   }),
    this.setState({        
        data: this.state.data.filter(person => person.gender === 'Female')
    })  
  }

  render() {
    const { data, firstNameSelected } = this.state;
    return (
      <div>
        <div>

          <button 
            onClick={this.handleToUpperCaseFirstName}>
            HIGHLIGHT FIRSTNAME (UPPERCASE)
          </button>

          <button 

            onClick={this.handleShowOnlyMale.bind(this)}>Show All Men</button>
          <button 

            onClick={this.handleShowOnlyFemale.bind(this)}>Show All The Ladies</button>
        </div>


        <ReactTable
          data={data}
          columns={[
            {

              columns: [
                {
                  Header: "First Name",
                  accessor: "first_name",
                  show: firstNameSelected
                },
                {
                  Header: "Last Name",
                  id: "last_name",
                  //show: firstNameSelected,
                  accessor: d => d.last_name
                }
              ]
            },
            {

              columns: [
                {
                  Header: "Email",
                  accessor: "email"
                },
                {
                  Header: "Gender",
                  accessor: "gender"
                }
              ]
            },

          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />

      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

Вы можете сохранять свои данные в состоянии и возвращать только отфильтрованные значения, например: 

 handleShowOnlyMale() {
   return this.state.data.filter(person => person.gender === 'Male');
 }

 handleShowOnlyFemale(){
   return this.state.data.filter(person => person.gender === 'Female');  
 }
0 голосов
/ 09 апреля 2019

Почему вы не используете defaultData для фильтрации 

handleShowOnlyMale(){
   this.setState({        
    data: this.state.defaultData.filter(person => person.gender === 'Male')
   })    
 }

handleShowOnlyFemale(){
   this.setState({        
    data: this.state.defaultData.filter(person => person.gender === 'Female')
  })  
 }
...