如果搜索为空，React Filter不返回数据

Question

我的问题是数据不显示，如果搜索词是空的。

这曾经与我的旧json数据if (!searchTerm) return data工作。但现在我正在使用sanity cdn，我不知道为什么这不起作用。这也是控制台日志中的一个新警告。

React Hook useMemo has a missing dependency: 'data'. Either include it or remove the dependency array.

const [data, setData] = useState([] as any [])
useEffect(() => {
sanityClient.fetch(`*[ _type == "positions"] {
_id,
category,
type,
position,
location,
}`
).then(result => {
setData(result)
})
}, [])
const [searchTerm, setSearchTerm] = useState<string>("");
const filteredPositions = useMemo(() => {
if (!searchTerm) return data;
return data.filter(({ id, ...other }) => {
const lowerCasedSearchTerm: string = searchTerm.toLowerCase();
return Object.values(other)
.map((v: any) => v.toLowerCase())
.some((v: any) => v.includes(lowerCasedSearchTerm));
});
}, [searchTerm]);
{filteredPositions?.map((position: any, index) => (
<div key={position.position}>
<SinglePosition
category={position.category}
type={position.type}
position={position.position}
/>
</div>
))}

Answer 1

来自Sanity的数据是异步获取的，因此您的组件首先呈现为一个空数组作为数据。

那么你正在使用useMemo钩子，searchTerm作为唯一的依赖项。这意味着，只有当searchTerm改变时，网站的这一部分才会呈现。但是，当从Sanity获取数据时，您希望它再次呈现。

要做到这一点，你应该通过添加数据来更新useMemo钩子的依赖数组

const filteredPositions = useMemo(() => {
// ...
}, [searchTerm, data]);