为什么在 React App 输入字段中键入 ANYTHING 会使我的 Persons 在基本的电话簿应用程序中显示为空白？-解网

问：

我想做的是在我基本的 React 电话簿应用程序中创建一个搜索功能。人员的初始数据存储在项目根目录的 db.json 文件中。

这是一个有问题的代码，当我在输入字段中输入某些内容后，人员列表的整个显示都变为空白：

import React, {useState} from 'react';

const Search = ({persons, setPersons}) => {
    const [filter, setFilter] = useState('');

    const handleFilterEntry = (event) => {
        const value = event.target.value;
        setFilter(value);
        const filteredPersons = persons.filter( person => {
            person.name.toLowerCase().includes(value.toLowerCase())
        });
        setPersons(filteredPersons);
        console.log(value);
    }
    return (
        <div>
            Filter names with: <input value = {filter} onChange={handleFilterEntry}/>
        </div>
    )
}

export default Search;

这是修复该问题的handleFilterEntry函数的更新代码：

const handleFilterEntry = (event) => {
        const value = event.target.value;
        setFilter(value);

        const filteredPersons = value
            ? persons.filter(
                (person) =>
                    person.name.toLowerCase().includes(value.toLowerCase())
            )
            : persons;

        setPersons(filteredPersons);
        console.log(value);
    };

我想知道为什么添加条件逻辑有效并解决了问题？

我还想知道，在输入字段中向后退行某些字符时，为什么列表没有恢复为显示带有退格字母的人员列表。

示例：
列表中有 Joe 和 Jack 的名字。
我输入 J，它过滤到 Joe 和 Jack。
我输入 Jo，它过滤到 Joe。但是我退格到只有 J，它不会恢复为在列表中同时显示 Joe 和 Jack，仍然只显示 Joe。

任何帮助将不胜感激，我是新手。提前致谢！

javascript reactjs 数组 react-hooks 反应效果

const Search = ({ persons, setPersons }) => {
  const [filter, setFilter] = useState("");
  const filteredPersons = persons.filter((person) =>
    person.name.toLowerCase().includes(filter.toLowerCase()),
  );

  const handleFilterEntry = (event) => {
    const value = event.target.value;
    setFilter(value);
  };
  return (
    <div>
      Filter names with: <input value={filter} onChange={handleFilterEntry} />
    </div>
  );
};

您可以使用 useMemo 提高其性能，以便仅在相关内容发生更改时重新计算：filteredPersons

const filteredPersons = useMemo(() => {
  return persons.filter((person) =>
    person.name.toLowerCase().includes(filter.toLowerCase()),
  );
}, [persons, filter]);

上一个：直接使用新对象与使用 response.data（从本地 db.json 获取/保存数据）的区别？

下一个：TypeError：posts.map 不是 Reactjs 中的函数，同时使用 useEffect 钩子从 API 获取数据

为什么在 React App 输入字段中键入 ANYTHING 会使我的 Persons 在基本的电话簿应用程序中显示为空白？

Why does typing ANYTHING in the React App input field make my Persons display blank for a rudimentary Phonebook App?

评论