如何在 reactjs 中设置状态数据

Question

由于我是 react 新手，我使用过滤器和映射从数组列表中选择数组。我得到了预期的输出。现在我想通过渲染值设置 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。

查看sn-p：

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

}

另外，请确保向<NativeSelect> 提供value，即this.state.name，因为它是一个受控字段。

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

Answer 2

首先，我认为您在 render 方法中以错误的方式更新状态：

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

其次，我认为您将渲染节点存储到状态中的想法不是可行的方法。您可能应该将过滤后的数组结果存储在状态中，然后让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())
}));

Answer 3

?你可以只修改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);
}

---

✅最终结果

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