Как я могу установить данные в состоянии в reactjs

Question

Поскольку я новичок в реакции, я использовал фильтр и карту, чтобы выбрать массив из списка массивов. Я получил свой вывод, как и ожидалось. Теперь я хочу установить this.state.search по отображаемому значению. Как я могу это сделать? Вот фотографии моего кода ниже:

import React, { Component } from 'react';
import { NativeSelect } from '@material-ui/core';

export default class Test extends Component {
constructor() {
    super();
    this.state = {
        people: [
            {
                address: "Biratnagar",

                bank: "Nabil Bank",

                bankaccountnumber: 34343434,

                baselocation: "Kathmandu",

                basicpay: 5000,

                branch: "telecom",

                class: "class1",

                confirmpassword: "nabanit123",

                degree: "master",

                designation: "engineer",

                email: "nabanitkoirala@gmail.com",

                id: "5e9fdebf0178920ed082241f",

                mobilenumber: 445454545,

                name: "Nabanit Koirala",

                password: "nabanit123",

                salary: 20000
            },
            {
                address: "Biratnagar",

                bank: "Nabil Bank",

                bankaccountnumber: 34343434,

                baselocation: "Kathmandu",

                basicpay: 5000,

                branch: "telecom",

                class: "class1",

                confirmpassword: "nabanit123",

                degree: "master",

                designation: "engineer",

                email: "nabanitkoirala@gmail.com",

                id: "5e9fdebf0178920ed082241f",

                mobilenumber: 445454545,

                name: "saroj kumar",

                password: "nabanit123",

                salary: 30000
            },
            {
                address: "Biratnagar",

                bank: "Nabil Bank",

                bankaccountnumber: 34343434,

                baselocation: "Kathmandu",

                basicpay: 5000,

                branch: "Account",

                class: "class1",

                confirmpassword: "nabanit123",

                degree: "master",

                designation: "engineer",

                email: "nabanitkoirala@gmail.com",

                id: "5e9fdebf0178920ed082241f",

                mobilenumber: 445454545,

                name: "kamlesh shresths",

                password: "nabanit123",

                salary: 5000
            },
            {
                address: "Biratnagar",

                bank: "Nabil Bank",

                bankaccountnumber: 34343434,

                baselocation: "Kathmandu",

                basicpay: 5000,

                branch: "IT",

                class: "class1",

                confirmpassword: "nabanit123",

                degree: "master",

                designation: "engineer",

                email: "nabanitkoirala@gmail.com",

                id: "5e9fdebf0178920ed082241f",

                mobilenumber: 445454545,

                name: "kumar thapa",

                password: "nabanit123",

                salary: 50000
            },
        ],
        name: '',
        isLoading: true,
        search: ''
    }
}
handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
        [name]: value
    })
}
handleSubmit = (e) => {
    e.preventDefault();

    this.setState({
        isLoading: false


    })

    console.log("handle submit>>", this.state);
}
componentDidMount() {
    this.setState({
        search: Test
    })

}

render() {
    console.log("component did mount>>", this.state);
    const { search } = this.state;
    let Test = this.state.isLoading
        ? <p>Isloading</p>
        : this.state.people.filter(item => item.name === this.state.name).map(item => (
            <div>
                <p>key:{item.name}</p>
                <div>

                    <p>add:{item.address}</p>
                    <p>bank:{item.bank}</p>
                    <p>bankaccount:{item.bankaccountnumber}</p>
                    <p>baselocation:{item.baselocation}</p>
                    <p>basicpay:{item.basicpay}</p>
                    <p>branch:{item.branch}</p>
                    <p>class:{item.class}</p>
                    <p>confirmpassword:{item.confirmpassword}</p>
                    <p>degree:{item.degree}</p>
                    <p>designation:{item.designation}</p>
                    <p>email:{item.email}</p>
                    <p>mobilenumber:{item.mobilenumber}</p>
                    <p>name:{item.name}</p>
                    <p>password:{item.password}</p>
                    <p>salary:{item.salary}</p>

                </div>
            </div>
        ))
    this.state.search = Test;
    return (
        <div>


            <NativeSelect defaultValue="" name="name" onChange={this.handleChange}>
                <option value="choose">choose</option>
                <option value="Nabanit Koirala">Nabanit Koirala</option>
                <option value="Saroj Kumar">Saroj Kumar</option>

            </NativeSelect>
            <button type="submit" onClick={this.handleSubmit}>Search</button>
            <div>
                {Test}

            </div>
        </div>
    )
}
}

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

Answer 1

Сохраните отдельное состояние для filteredPeople и обновите его в вашем handleChange. Во время рендеринга просто отобразите через filteredPeople.

См. Фрагмент:

this.state = {
        people: [
            {
                address: "Biratnagar",
            ...
            }
        name,
        filteredPeople=[],   
        ...

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
        [name]: value,
        filteredPeople: this.state.people.filter(item => item[name] === value)
    })
       ...
let Test = this.state.isLoading
        ? <p>Isloading</p>
        : this.state.filteredPeople.map(item => (
            <div>
                <p>key:
        ... 

}

Кроме того, обязательно укажите value, т.е. this.state.name для <NativeSelect> как это контролируемое поле.

<NativeSelect defaultValue="" name="name" value={this.state.name} onChange={this.handleChange}>
                <option value="choose">choose</option>

Answer 2

CanВы можете просто изменить handleChange ()

и удалить эту строку ?? this.state.search = Test из своего кода, потому что обновление состояния в render () не является правильным способом.

handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
        [name]: value
    })
      var searchedResult=  this.state.people.filter(item => item.name === this.state.name);

       this.setState({
        search: searchedResult
       })
       console.log('searched data =>',this.state.search);
}

---

inal Окончательный результат

import React, { Component } from 'react';
import { NativeSelect } from '@material-ui/core';

export default class Test extends Component {
constructor() {
    super();
    this.state = {
        people: [
            {
                address: "Biratnagar",

                bank: "Nabil Bank",

                bankaccountnumber: 34343434,

                baselocation: "Kathmandu",

                basicpay: 5000,

                branch: "telecom",

                class: "class1",

                confirmpassword: "nabanit123",

                degree: "master",

                designation: "engineer",

                email: "nabanitkoirala@gmail.com",

                id: "5e9fdebf0178920ed082241f",

                mobilenumber: 445454545,

                name: "Nabanit Koirala",

                password: "nabanit123",

                salary: 20000
            },
            {
                address: "Biratnagar",

                bank: "Nabil Bank",

                bankaccountnumber: 34343434,

                baselocation: "Kathmandu",

                basicpay: 5000,

                branch: "telecom",

                class: "class1",

                confirmpassword: "nabanit123",

                degree: "master",

                designation: "engineer",

                email: "nabanitkoirala@gmail.com",

                id: "5e9fdebf0178920ed082241f",

                mobilenumber: 445454545,

                name: "saroj kumar",

                password: "nabanit123",

                salary: 30000
            },
            {
                address: "Biratnagar",

                bank: "Nabil Bank",

                bankaccountnumber: 34343434,

                baselocation: "Kathmandu",

                basicpay: 5000,

                branch: "Account",

                class: "class1",

                confirmpassword: "nabanit123",

                degree: "master",

                designation: "engineer",

                email: "nabanitkoirala@gmail.com",

                id: "5e9fdebf0178920ed082241f",

                mobilenumber: 445454545,

                name: "kamlesh shresths",

                password: "nabanit123",

                salary: 5000
            },
            {
                address: "Biratnagar",

                bank: "Nabil Bank",

                bankaccountnumber: 34343434,

                baselocation: "Kathmandu",

                basicpay: 5000,

                branch: "IT",

                class: "class1",

                confirmpassword: "nabanit123",

                degree: "master",

                designation: "engineer",

                email: "nabanitkoirala@gmail.com",

                id: "5e9fdebf0178920ed082241f",

                mobilenumber: 445454545,

                name: "kumar thapa",

                password: "nabanit123",

                salary: 50000
            },
        ],
        name: '',
        isLoading: true,
        search: ''
    }
}
    handleChange = (e) => {
        const { name, value } = e.target;
        this.setState({
            [name]: value
        })
          var searchedResult=  this.state.people.filter(item => item.name === this.state.name);

           this.setState({
            search: searchedResult
           })
           console.log('searched data =>',this.state.search);
    }
handleSubmit = (e) => {
    e.preventDefault();

    this.setState({
        isLoading: false


    })

    console.log("handle submit>>", this.state);
}
componentDidMount() {
    this.setState({
        search: Test
    })

}

render() {
    console.log("component did mount>>", this.state);
    const { search } = this.state;
    let Test = this.state.isLoading
        ? <p>Isloading</p>
        : this.state.people.filter(item => item.name === this.state.name).map(item => (
            <div>
                <p>key:{item.name}</p>
                <div>

                    <p>add:{item.address}</p>
                    <p>bank:{item.bank}</p>
                    <p>bankaccount:{item.bankaccountnumber}</p>
                    <p>baselocation:{item.baselocation}</p>
                    <p>basicpay:{item.basicpay}</p>
                    <p>branch:{item.branch}</p>
                    <p>class:{item.class}</p>
                    <p>confirmpassword:{item.confirmpassword}</p>
                    <p>degree:{item.degree}</p>
                    <p>designation:{item.designation}</p>
                    <p>email:{item.email}</p>
                    <p>mobilenumber:{item.mobilenumber}</p>
                    <p>name:{item.name}</p>
                    <p>password:{item.password}</p>
                    <p>salary:{item.salary}</p>

                </div>
            </div>
        ))
    // this.state.search = Test;// Do not do like this
    return (
        <div>


            <NativeSelect defaultValue="" name="name" onChange={this.handleChange}>
                <option value="choose">choose</option>
                <option value="Nabanit Koirala">Nabanit Koirala</option>
                <option value="Saroj Kumar">Saroj Kumar</option>

            </NativeSelect>
            <button type="submit" onClick={this.handleSubmit}>Search</button>
            <div>
                {Test}

            </div>
        </div>
    )
}
}

Answer 3

Во-первых, я думаю, что вы некорректно обновляете состояние в вашем методе render:

// No-op
this.state.search = Test; 
// Correct way should be
this.setState({ search: Test });

Во-вторых, я думаю, что ваша идея сохранения визуализированного узла в состоянии не путь к go. Вам, вероятно, следует сохранить результат отфильтрованного массива в состоянии, а затем позволить методу render выполнить свою работу для вывода результата.

const Test = <div>{this.state.people.map(item => <p>{item}</p>)}</div>;

this.setState({ search: Test }); // Don't do this

---

Возможно, вам нужно:

Добавьте новый массив в вашем состоянии для хранения результата (вместо вызова search может быть целесообразно переименовать его в result). Это сделано для того, чтобы вы могли сохранить исходное состояние people для последующего использования для фильтрации:

constructor() {
    super();
    this.state = {
      people: SAMPLE_DATA,
      name: "", // Maybe you don't need to store this?
      result: []
    };
}

в обработчике событий handleChange, обновите отфильтрованное значение до состояния:

handleChange = (e) => {
    const { name, value } = e.target;

    this.setState(prev => ({
      [name]: value,
      // You got the value now, so update the result at the same time
      result: prev.people.filter(item => item.name === value),
    }));
}

И в вашем render методе вы можете сделать это напрямую:

render() {
    const { result } = this.state;
    return (
      <div>
        <NativeSelect defaultValue="" name="name" onChange={this.handleChange}>
          <option value="choose">choose</option>
          <option value="Nabanit Koirala">Nabanit Koirala</option>
          <option value="Saroj Kumar">Saroj Kumar</option>
        </NativeSelect>

        <button type="submit" onClick={this.handleSubmit}>Search</button>
        <div>
          {
            result.map(item => (
              <div key={item.name}>
                <p>key:{item.name}</p>
                <div>
                  <p>add:{item.address}</p>
                  <p>bank:{item.bank}</p>
                  <p>bankaccount:{item.bankaccountnumber}</p>
                  <p>baselocation:{item.baselocation}</p>
                  <p>basicpay:{item.basicpay}</p>
                  <p>branch:{item.branch}</p>
                  <p>class:{item.class}</p>
                  <p>confirmpassword:{item.confirmpassword}</p>
                  <p>degree:{item.degree}</p>
                  <p>designation:{item.designation}</p>
                  <p>email:{item.email}</p>
                  <p>mobilenumber:{item.mobilenumber}</p>
                  <p>name:{item.name}</p>
                  <p>password:{item.password}</p>
                  <p>salary:{item.salary}</p>
                </div>
              </div>
            ))
          }
        </div>
      </div>
    );
  }
}

Советы: если вы хотите чтобы сравнить имена, возможно, стоит сравнить их в нижнем регистре. Если вы не хотите сравнить точно так же.

this.setState(prev => ({
  [name]: value,
  result: prev.people.filter(item => item.name.toLowerCase() === value.toLowerCase())
}));