React 创建的输入搜索字段工作不正确答案

【问题标题】：Input search field created by React works incorrectlyReact 创建的输入搜索字段工作不正确
【发布时间】：2020-11-19 09:09:00
【问题描述】：

使用 React，我创建了一个搜索输入，我希望根据我的搜索值显示人员。这是我的代码：

import React, { useState, useEffect } from 'react';

function FilterPerson() {

    const [persons, setPersons] = useState([]);

    useEffect(() => {
        setPersons([
            { firstName: 'John', lastName: 'Doe', age: 27 },
            { firstName: 'Jane', lastName: 'Doe', age: 25 },
            { firstName: 'Baby', lastName: 'Doe', age: 21 },
        ]);
    }, []);

    const toDisplay = persons.map((person) => {
        return (
            <div key={person.firstName}>
                {person.firstName}, {person.lastName}, {person.age}
            </div>
        );
    });

    const onChangedHandler = (value) => {
        setPersons(persons.filter((person) => {
            return person.firstName.includes(value)
        }));
    };

    return (
        <div>
            <input type="text" onChange={(event) => onChangedHandler(event.target.value)} />
            {toDisplay}
        </div>
    );
};

export default FilterPerson;

这是我在屏幕上看到的：

然后，我在字段中输入大写 J，如下所示：

仅显示John 和Jane。结果看起来不错。

但是，当我从字段中删除大写字母 J 时，Baby Doe 应该会出现，但它没有：

此外，当我再次输入大写 B 时，一切都消失了：

从现在开始，无论我在搜索字段中输入什么内容，都不再显示任何内容。

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript reactjs search input state

【解决方案1】：

当您开始写入时，您将替换 persons 数据。我已经更新了您的代码，以便将过滤后的人员附加到另一个数组中。

import React, { useState, useEffect } from 'react';

function FilterPerson() {

    const [persons, setPersons] = useState([]);
    const [filtered, setFiltered] = useState([]);

    useEffect(() => {
        setPersons([
            { firstName: 'John', lastName: 'Doe', age: 27 },
            { firstName: 'Jane', lastName: 'Doe', age: 25 },
            { firstName: 'Baby', lastName: 'Doe', age: 21 },
        ]);
    }, []);

    const toDisplay = filtered.map((person) => {
        return (
            <div key={person.firstName}>
                {person.firstName}, {person.lastName}, {person.age}
            </div>
        );
    });

    const onChangedHandler = (value) => {
        setFiltered(persons.filter((person) => {
            return person.firstName.includes(value)
        }));
    };

    return (
        <div>
            <input type="text" onChange={(event) => onChangedHandler(event.target.value)} />
            {toDisplay}
        </div>
    );
};

export default FilterPerson;

编辑：Kirankumar Ambati 下面的回答会更有效率，尤其是当persons 数组变大时。

【讨论】：

嗨 Reece，这对我有用。感谢您的帮助。
嗨@Dimisizz，很高兴我能帮忙:)

【解决方案2】：

我将您的代码更新为具有处理过滤器输入的searchTerm，并根据searchTerm 获取persons 。

    import React, { useState, useEffect } from 'react';

    function FilterPerson() {

    const [persons, setPersons] = useState([]);
    const [searchTerm, setSearchTerm] = useState("");

    useEffect(() => {
        setPersons([
            { firstName: 'John', lastName: 'Doe', age: 27 },
            { firstName: 'Jane', lastName: 'Doe', age: 25 },
            { firstName: 'Baby', lastName: 'Doe', age: 21 },
        ].filter(person => {
            if(searchTerm === "") {
                return person;
            }            
            
            return person.firstName.includes(searchTerm);
        }));
    }, [searchTerm]);

    const toDisplay = persons.map((person) => {
        return (
            <div key={person.firstName}>
                {person.firstName}, {person.lastName}, {person.age}
            </div>
        );
    });

    const onChangedHandler = (value) => {
        setSearchTerm(value);
    };

    return (
        <div>
            <input type="text" onChange={(event) => onChangedHandler(event.target.value)} />
            {toDisplay}
        </div>
    );
};`

export default FilterPerson;

【讨论】：

【解决方案3】：

好吧，只要你输入 J，你就改变了 people 数组的内容。所以这对我来说很有意义

【讨论】：

【解决方案4】：

Baby Doe 已从 persons 数组中删除。尝试使用 2 个不同的 states。将所有人放在一个 array 中，将过滤后的用户放在另一个 array

【讨论】：

嗨，我创建了另一个状态并继续过滤它。有用。谢谢你的建议。