Question

预期结果：在input中键入关键字进行搜索，并过滤帖子列表。

下面是我在React中的代码，当我在搜索框中键入内容时，确实searchSpace被调用，console.log(search_keywords)和console.log('filter', data)出现在控制台中。但是filteredData没有更新，我的帖子列表仍然相同。我在这里想念什么？

const Blog = () => {
  const [posts] = useState([]);

  let filteredData = posts;

  let search_keywords = "";
  const searchSpace = (event) => {
    search_keywords = event.target.value;
    console.log(search_keywords)

    filteredData = posts.filter((data)=>{
      if(data.title.toLowerCase().includes(search_keywords)){
        console.log('filter', data)
        return data
      }
    });
  }

  return (
    <>
      <input placeholder="search..." id="search" type="text" onChange={(e)=>searchSpace(e)} />
      {
        filteredData.map((v, i) => {
           return <Card post={v} key={i} />;
        })
      }
    </>
  );
}

省略了一些不相关的代码

Answer 1

您还需要保持filteredData状态。设置它会触发重新渲染。将posts视为只读数据。

const Blog = () => {
      const [posts,setPosts] = useState([]);
      let [filteredData,setFilteredData] = useState([]);

      let search_keywords = "";
      const searchSpace = (event) => {
        search_keywords = event.target.value;
        console.log(search_keywords)

        filteredData = posts.filter((data)=>{
          if(data.title.toLowerCase().includes(search_keywords)){
            console.log('filter', data)
            return data
          }
        });
        setFilteredData(filteredData);
      }

      return (
        <>
          <input placeholder="search..." id="search" type="text" onChange={(e)=>searchSpace(e)} />
          {
            filteredData.map((v, i) => {
               return <Card post={v} key={i} />;
            })
          }
        </>
      );

反应：搜索框和过滤器图

1 个答案: