reactjs - 加载微调器时显示未找到搜索消息

问题描述

如果我的搜索没有返回任何结果，那么我将Does not match any results!在 Home.js 屏幕中显示一条消息。我想让消息的显示更有效。我在加载主屏幕时正在运行加载微调器，您可以看到在运行微调器时也显示文本（附加屏幕截图）

我想message仅在搜索未返回任何结果/搜索数据时才显示。在所有其他情况下，它应该被隐藏......我怎样才能提出这个条件？

const [playerList, setPlayerList] = useState([]);
const [searchTerm, setSearchTerm] = 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, playerList]);

return (
    <div className="App">
      <div className="wrapper">
        <div className="playerList_header">
          <h1>Players</h1>
          <label>
            <div className="playerSearch_Home">
              <div className="playerSearch_Icon">
                <img alt="" 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>
        <div>
        {!searchResults.length && (<div> <p className="noSearchData"> Does not match any results! </p> </div>)}
        <div className="playerList_home_page">
        {isLoading ? (
        <div className="loader">
        <div className="bubble"></div>
        <div className="bubble"></div>
        <div className="bubble"></div>
        <div className="bubble"></div>
      </div>
      ) : (
          <div className="grid-container">
            {
              searchResults.map(({ id, image, position, phonenumber, name }) => (
                <div key={id} className="grid-item">
                  {
                    deleteIcon.show && (
                      <span className="deletePlayerButton" onClick={deletePlayer(id)}>
                        <img className="deletePlayerimg" src="/images/delete.png"></img>
                      </span>
                    )}
                  <div>
                    <img alt="" className="playerProfilePic_home_tile" key={image} src={image}></img>
                  </div>
                  <div className="playerProfile_grid_border">
                    <span className="rec_name_position_data">
                      <h3 key={name}>{name}</h3>
                      <span className="playerPosition_home_tile" key={position}>{position}</span>
                    </span>
                  </div>
                  <span className="phoneNumber_home">
                    <img src="/images/phone.png" alt={"phoneTooltip.show"} key={id} name="phoneNumberhomeicon" onClick={displayPhoneToolTip(id)} />
                  </span>
                  {phoneTooltip === id && (
                    <div className="tooltip_PhoneNumber_home" key={phonenumber}>{phonenumber}</div>
                  )}
                </div>
              ))
            }
          </div>
         )}
        </div>
       </div> 
      </div>
      <AlertDialog
        onDelete={onDelete}
        open={deleteDialog}
        onClose={() => setDeleteDialog(false)}
        playerId={playerId}
      />
    </div>
  );

标签： reactjsreact-hooks

reactjs - 加载微调器时显示未找到搜索消息

问题描述

解决方案

推荐阅读