如何在 reactjs 中的 state 中设置数据

Question

Since i am new in react,i used filter and map to select array from array list.I got my output as expected.Now i want to set this.state.search by rendered value.How can i do it? Here are the pictures of my code below:

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

Since i get the output value,the array stored in state is filtered and displayed in the browser,now i want to store the filtered array in state,so how can i do it now.

Answer 1

Maintain a separate state for filteredPeople and update it in your handleChange . While rendering, just map through filteredPeople .

See the snippet:

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:
        ... 

}

Also, make sure to provide a value ie this.state.name to <NativeSelect> as it is a controlled field.

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

Answer 2

Firstly, I think you're updating the state in the wrong way in your render method:

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

Secondly, I think your idea of storing the rendered node into the state isn't the way to go. You should probably store the filtered array result in the state, and then let the render method do its job to render the result out.

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

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

---

What you want is maybe:

Add a new array in your state to store the result (instead of calling search maybe good to rename it to result ). This is so that you can keep the original people state to use later for filtering:

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

in your handleChange event handler, update the filtered value into the state:

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

And in your render method, you can render it out directly:

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

Tips: if you want to compare names, maybe consider comparing them in lowercase. Unless you want to compare exactly the same.

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

Answer 3

You Can just Modify the handleChange()

And remove this line this.state.search = Test from your code because updating state in a render() is not a right way.

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

---

✅Final result

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