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

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

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>
  );

返回消息以显示反应挂钩中的搜索结果为零

3 个答案: