React: поле поиска и карта фильтров - PullRequest
Новая
       2

React: поле поиска и карта фильтров

0 голосов
/ 07 мая 2020

Ожидаемые результаты: введите ключевые слова в 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} />;
        })
      }
    </>
  );
}

пропущены некоторые коды, которые не актуальны

1 Ответ

0 голосов
/ 07 мая 2020

Вам также необходимо поддерживать состояние 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} />;
            })
          }
        </>
      );
...