过滤后如何显示“未找到结果”？

Question

过滤后如何显示“未找到结果”？

const searchItems = (searchValue) => {
    setSearchInput(searchValue)
    if (searchInput !== '') {
        const filteredData = APIData.filter((post) => {
            return Object.values(post).join('').toLowerCase().includes(searchInput.toLowerCase())
        })
        setFilteredResults(filteredData)
    }
    else{
        setFilteredResults(APIData)
    }
}

我返回了过滤后的数据，但如果用户输入错误的数据，我不知道如何返回“未找到结果”！

这是文本输入

<OutlinedInput 
                className="SearchInput"
                placeholder='Search...'
                onChange={(e) => searchItems(e.target.value)}
                endAdornment={
                    <InputAdornment>
                    <SearchIcon />
                    </InputAdornment>
                }
            />

我在用着

{searchInput.length > 0 ? () : ()}

Answer 1

接收数据后，您应该检查您的filteredData数据。

if (searchInput !== '') {
    const filteredData = APIData.filter((post) => {
        return Object.values(post).join('').toLowerCase().includes(searchInput.toLowerCase())
    })
    if(filteredData){
        setFilteredResults(filteredData);
    }else{
       console.log("no result found");
    }
}
else{
    setFilteredResults(APIData)
}

或者检查您的回复是否包含您正在寻找的某种类型

if (!isNumber(filteredData.id) && filteredData.id === 0) {
    console.log("no result found");
}

您可以在这里找到一些示例https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter