返回一条消息，以便在 react 钩子中显示零搜索结果

Question

如果在 React hooks 中的搜索返回了zero results，我想在页面中显示一条短信"搜索条件没有可用的数据！我已经尝试了一个条件，但不确定在哪里添加。

if(results.length == 0) {
return (
<div>No data available for the search criteria !</div>
)
}

const [searchTerm, setSearchTerm] = useState("");
const [searchResults, setSearchResults] = useState([]);
const handleChange = event => {
setSearchTerm(event.target.value);
};
useEffect(() => {
const results = playerList.filter(player =>
player.name.toLowerCase().includes(searchTerm) || player.name.toUpperCase().includes(searchTerm) || player.position.toLowerCase().includes(searchTerm) 
|| player.position.toUpperCase().includes(searchTerm)
);
setSearchResults(results);
}, [searchTerm]);

//

return (
<div className="App">
<label>
<div className="playerSearch_Home">
<div className="playerSearch_Icon">
<img src="/images/search-image-player.jpg"></img>
</div>
<input type="text" className="playerSearch_Home_Input" placeholder="Search players..." value={searchTerm} onChange={handleChange} />
</div>
</label>
<div className="playerList_home_page">
<div className="grid-container">
{
searchResults.map(player => {
return (
<div className="grid-item">
<div>
<img className="playerProfilePic_home_tile" key={player.image} src={player.image}></img>
</div>
<div className="playerProfile_grid_border">
<h3 key={player.name}>{player.name}</h3>
<span className="playerPosition_home_tile" key={player.position}>{player.position}</span>
</div>
</div>
);
})
}
</div>
</div>
</div>
);

Answer 1

你使用简单的ternary operator，像这样：

{
searchResults.length ?
searchResults.map(player => {
return (
<div className="grid-item">
<div>
<img className="playerProfilePic_home_tile" key={player.image} src={player.image}></img>
</div>
<div className="playerProfile_grid_border">
<h3 key={player.name}>{player.name}</h3>
<span className="playerPosition_home_tile" key={player.position}>{player.position}</span>
</div>
</div>
);
}) :
"No data available for the search criteria !" 
}

Answer 2

您可以根据搜索结果的长度使用三元运算符。 请检查以下代码：

return (
<div className="App">
<label>
<div className="playerSearch_Home">
<div className="playerSearch_Icon">
<img src="/images/search-image-player.jpg"></img>
</div>
<input type="text" className="playerSearch_Home_Input" placeholder="Search players..." value={searchTerm} onChange={handleChange} />
</div>
</label>
<div className="playerList_home_page">
<div className="grid-container">
{
**searchResults.length > 0 ?** 
searchResults.map(player => {
return (
<div className="grid-item">
<div>
<img className="playerProfilePic_home_tile" key={player.image} src={player.image}></img>
</div>
<div className="playerProfile_grid_border">
<h3 key={player.name}>{player.name}</h3>
<span className="playerPosition_home_tile" key={player.position}>{player.position}</span>
</div>
</div>
);
})
**} : <p>Zero records found for the Search</p>**
</div>
</div>
</div>

(;

Answer 3

您需要根据搜索结果数组的长度进行条件呈现。如果数组中没有任何内容，则它将显示一条消息。

{!searchResults.length  && (<div> <p>  No data available for the search criteria ! </p> </div>) }

return (
<div className="App">
<label>
<div className="playerSearch_Home">
<div className="playerSearch_Icon">
<img src="/images/search-image-player.jpg"></img>
</div>
<input type="text" className="playerSearch_Home_Input" placeholder="Search players..." value={searchTerm} onChange={handleChange} />
</div>
</label>
{!searchResults.length  && (<div> <p>  No data available for the search criteria ! </p> </div>) }
<div className="playerList_home_page">
<div className="grid-container">
{
searchResults.map(player => {
return (
<div className="grid-item">
<div>
<img className="playerProfilePic_home_tile" key={player.image} src={player.image}></img>
</div>
<div className="playerProfile_grid_border">
<h3 key={player.name}>{player.name}</h3>
<span className="playerPosition_home_tile" key={player.position}>{player.position}</span>
</div>
</div>
);
})
}
</div>
</div>
</div>
);