javascript - 如何在 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: "[e-mail]",

                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: "[e-mail]",

                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: "[e-mail]",

                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: "[e-mail]",

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

由于我得到了输出值，存储在状态中的数组被过滤并显示在浏览器中，现在我想将过滤后的数组存储在状态中，那么我现在该怎么做。

标签： javascriptreactjsfiltermaps

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

}

另外，请确保提供valueie this.state.nameto，<NativeSelect>因为它是受控字段。

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