为什么列表消失并且过滤不起作用？

Question

我向服务器发出请求并获取数据（类别列表），该数据将显示在视图表列表中并实现一些功能我有一个任务，该如何处理列表：

• 当用户在title name中写入名称类别并按下按钮input]时，通过Search进行过滤>

按标题名称过滤，我可以使用查询参数q来实现，当用户在输入中输入某些类别并按下按钮Submit时，它将插入文件apiCategory.js

中例如：http://path/q=animals。在这种情况下，页面上仅显示类别动物。

但是当我编写通过title name实现过滤的代码时，我的列表消失

。和过滤不起作用。

代码中要解决的问题？

也许我在方法filter或updateSearchInput中写错了？

Home.js：

const Home = () => {
  const [value, setValue] = useState({
    listCategory: [],
    filteredlistCategory: [],
    searchInput: ""
  });

  useEffect(() => {
    async function fetchData( searchInput ) {
        const res = await apiCategory('/pathApi', {
          method: 'GET',
        }, searchInput);

          setValue(prev => ({
            ...prev,
            listCategory: res.data,
         }));
    }
    fetchData(value.searchInput); 
  }, [value.searchInput]);


    const updateSearchInput = (e) => {
       setValue((prev) => ({
         searchInput: e.target.value
       }));
     };

    const filter = () => {
       setValue((prev) => 
          ({ searchInput, listCategory}) => ({
          filteredlistCategory: listCategory.filter(item =>
          item.firstName.toLowerCase().includes(searchInput.toLowerCase()))
     }))
    };

  return (
    <div>
       <Search value={value.searchInput} onChange={updateSearchInput} onSearch={filter}/>  
       <Table dataAttribute={value.filteredlistCategory}/>
    </div>
  );
};

apiCategory.js：

export const apiCategory = async (url, args, valueFilter) => {
  const response = await fetch(`${url}?q=${valueFilter}`, {   
   ...args,
    headers: {/....}
    }});

 return response.json();      
}

Search.js：

export default ({ value, onChange, onSearch }) => {
  return (
    <div className="search">
        <input type="text" className="searchInput" onChange={onChange} value={value}/>
        <button className="buttonSearch" onClick={() => onSearch(value)}>Search</button>
    </div>
  );
};

来自服务器的响应：

{"data":[           
          {"id":1,"title":"animals","created_at":"/...","updated_at":"/..."},
          {"id":2,"title":"space","created_at":"/...","updated_at":"/..."},
          {"id":3,"title":"sport","created_at":"/...","updated_at":"/..."}
        ]
}

我向服务器发出请求，并获取显示在视图表列表中并实现一些功能的数据（类别列表），并且我有一个任务，该如何处理列表：按标题名称进行过滤...] >

Answer 1

我看到的代码问题很少：

1. 在fetchData功能中，您没有设置filteredlistCategory，而是将此列表传递给Table组件，因此，由于该列表为空，因此最初不会显示任何数据。