时间戳

首页 > 解决方案 > 在 React 中过滤状态逻辑

reactjs - 在 React 中过滤状态逻辑

问题描述

我想根据输入值过滤我的状态（对象数组），但我很确定我做错了什么并且违反了 React 中的核心概念/规则。它在我输入时过滤我的状态，但是，如果我想回到原始状态（输入值为空），我不能因为我已经改变了数组？我正在尝试将原始状态复制到另一个数组并对其进行处理，但结果是相同的。

根据这个例子过滤状态的正确方法是什么？

const App = () => {
  const [persons, setPersons] = useState([
    { name: 'Arto Hellas', number: '040-123456' },
    { name: 'Ada Lovelace', number: '39-44-5323523' },
    { name: 'Mary Poppendieck', number: '39-23-6423122' }
  ]);
  const [name, setName] = useState('');


  const handleFilterName = event => {
    setName(event.target.value);
    if (name !== '') {
      const filteredPersons = persons.filter(person =>
        person.name.toLowerCase().includes(name.toLowerCase())
      );
      setPersons(filteredPersons);
    }
  };

...

 return (
      <div>
        Filter: <input onChange={handleFilterName} value={name} />
      </div>
...

标签： reactjs

解决方案

我可能会这样写：

  1. handleFilterName只设置名称。
  2. 当您要显示过滤后的列表时（例如在 中render），计算filteredPersons并显示它们。不要更改persons列表。
  3. 然后，如果您重设名称，您仍将拥有完整列表。

这是一个工作示例：

function App() {
  const persons = [
    { name: "Arto Hellas", number: "040-123456" },
    { name: "Ada Lovelace", number: "39-44-5323523" },
    { name: "Mary Poppendieck", number: "39-23-6423122" }
  ];
  const [name, setName] = useState("");

  const handleFilterName = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

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

  return (
    <div>
      Filter: <input onChange={handleFilterName} value={name} />
      <ul>
        {filteredPersons.map(person => (
          <li>
            {person.name}: {person.number}
          </li>
        ))}
      </ul>
    </div>
  );
}

推荐阅读