为什么用react钩子过滤状态数组不起作用但是过滤原始数组可以

Question

基于用户的输入，我正在对数组进行过滤。如果我使用teamsfrom状态，则不起作用，但是如果使用原始数组，它将正确过滤。谁能解释为什么会这样？我有点难过。

这里有一个codeandbox供参考。

const teams_data = [
  "tottenham",
  "arsenal",
  "man utd",
  "liverpool",
  "chelsea",
  "west ham"
];

function App() {
  const [teams, setTeams] = React.useState(teams_data);
  const [search, setSearch] = React.useState("");

  return (
    <div className="App">
      <input
        onChange={e => {
          // if I filter on teams below it doesn't work as it should
          // but if I use teams_data (original array) it works
          const filteredTeams = teams_data.filter(team => {
             return team.toLowerCase().includes(e.target.value.toLowerCase());
          });
          setTeams(filteredTeams);
          setSearch(e.target.value);
        }}
        type="text"
        value={search}
      />
      {teams.map(team => (
        <p>{team}</p>
      ))}
    </div>
  );
}

Answer 1

如果您先过滤teams，然后再过滤，则setTeams只能从集合中删除团队。当开始时您的过滤器不匹配任何内容时，它已经将您缩小teams为一个空数组。teams_data另一方面，如果您使用，则始终使您的所有团队均可使用该过滤器。