Javascript 使用钩子输入搜索过滤器数组

我想使用react钩子对数组进行过滤。这应该是一个相当直接的任务，但我假设这与异步更新挂钩有关，尽管这可能是错误的

我被难倒了，但我在下面列出了一个示例和我的代码：

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 => {
          const test = teams.filter(team => {
            return team.toLowerCase().includes(e.target.value.toLowerCase());
          });
          console.log("test: ", test);

          // uncomment line below and teams is logged as I want
          setTeams(test);
          setSearch(e.target.value);
        }}
        type="text"
        value={search}
      />
      {teams.map(team => (
        <p>{team}</p>
      ))}
    </div>
  );
}

const团队\u数据=[
“托特纳姆”，
“阿森纳”，
“曼联”，
“利物浦”，
“切尔西”，
“西汉姆”
];
函数App（）{
const[teams，setTeams]=React.useState（teams\u数据）；
const[search，setSearch]=React.useState（“”）；
返回(
{
const test=teams.filter（团队=>{
return team.toLowerCase（）.includes（e.target.value.toLowerCase（））；
});
日志（“测试：”，测试）；
//取消下面的注释行，团队按我的要求记录
SETTAMS（测试）；
设置搜索（如目标值）；
}}
type=“text”
值={search}
/>
{teams.map（team=>(
{团队}

))}
);
}

您需要过滤原始数据：

  const test = teams_data.filter(team => {
    return team.toLowerCase().includes(e.target.value.toLowerCase());
  });

---

您需要过滤原始数据：

  const test = teams_data.filter(team => {
    return team.toLowerCase().includes(e.target.value.toLowerCase());
  });

---

您只需为搜索结果添加另一个状态即可

    const [data , setData] = useState(teams);
    const [query, setQuery] = useState('')
    const[res , setRes] = useState([]);
    return (
      <div className="App container">
          <form onSubmit = {(e) => e.preventDefault()}>
              <input type = "search" className = "srh" placeholder = "search about..." 
              onChange = {(e) => {
                const test = data.filter(team => {
                  return (
                    team.toLowerCase().includes(e.target.value.toLowerCase())
                  )
                })
                setRes(test)
                if(e.target.value === '') setRes([])
              }}
              />
          </form>
          <div>
          {
            res.map((item , i) => (
            <p key = {i}>{item}</p>
            ))
          }
          </div>
      </div>
    );

const[data，setData]=useState（团队）；
const[query，setQuery]=useState（“”）
常数[res，setRes]=useState（[]）；
返回(
e、 preventDefault（）}>
{
const test=data.filter（团队=>{
返回(
team.toLowerCase（）包括（e.target.value.toLowerCase（））
)
})
setRes（测试）
如果（e.target.value==''）setRes（[]）
}}
/>
{
res.map（（项目，i）=>(
{item}
))
}
);

您只需为搜索结果添加另一个状态即可

    const [data , setData] = useState(teams);
    const [query, setQuery] = useState('')
    const[res , setRes] = useState([]);
    return (
      <div className="App container">
          <form onSubmit = {(e) => e.preventDefault()}>
              <input type = "search" className = "srh" placeholder = "search about..." 
              onChange = {(e) => {
                const test = data.filter(team => {
                  return (
                    team.toLowerCase().includes(e.target.value.toLowerCase())
                  )
                })
                setRes(test)
                if(e.target.value === '') setRes([])
              }}
              />
          </form>
          <div>
          {
            res.map((item , i) => (
            <p key = {i}>{item}</p>
            ))
          }
          </div>
      </div>
    );

const[data，setData]=useState（团队）；
const[query，setQuery]=useState（“”）
常数[res，setRes]=useState（[]）；
返回(
e、 preventDefault（）}>
{
const test=data.filter（团队=>{
返回(
team.toLowerCase（）包括（e.target.value.toLowerCase（））
)
})
setRes（测试）
如果（e.target.value==''）setRes（[]）
}}
/>
{
res.map（（项目，i）=>(
{item}
))
}
);

出于兴趣，为什么要过滤原始数组？如果愿意，请随意回答此处-出于兴趣，为什么要过滤原始数组？如果愿意，请随意回答此处-