0

获取后我需要使用 h1 删除所有旧 div：

export default function SearchSong() {
    const [topSongs, setTopSongs] = useState([]);
    let inputEl = useRef(null);
    const fetchData = async () => {

更新。这是 fetch（返回正确的数据）：

      let sTrack = inputEl.current.value;
        sTrack = sTrack.replace(/ /g,"+");
        try {
          const response = await fetch(
            `http://ws.audioscrobbler.com/2.0/?method=track.search&track=${sTrack}&api_key=a3c9fd095f275f4139c33345e78741ed&format=json`
          );
          const data = await response.json();
          setTopSongs(data);
        } catch (error) {
          console.log(error.message);
        }
      };
  
    return (
      <div>
<div className="inner-input">
        <div className="container">
            <h1 className="search" >Search for song:
            </h1>

有输入：

            <input ref={inputEl} size="50" type="text"/>
            <button class="btn btn-primary" onClick={fetchData} >Fetch</button>
        </div>
        </div>
        {topSongs?.results?.trackmatches?.track.length &&
          topSongs.results.trackmatches.track.map((datumn) => {
            return (
                <div key={datumn.name}>
                                  <h1 className='heading'>{datumn.name}</h1>
              </div>
            );
          })}
      </div>
    )
  }

我试过 useRef 并删除父元素

4

1 回答 1

0

Fragments它们不会在实际的 DOM 树中呈现。您通常使用它们在单个根父级下渲染 2 个或更多元素。所以在渲染后删除它们是没有用的。

但是，您可以将它们从map函数中删除，而是

return <h1 key={datum.name} className="heading">{datum.name}</h1>;

因为无论如何你要返回一个根元素。

更新

如果要根据语句是true还是有条件地呈现false：

{topSongs?.results?.trackmatches?.track.length ?
  topSongs.results.trackmatches.track.map((datumn) => {
    return (
      <div key={datumn.name}>
        <h1 className='heading'>{datumn.name}</h1>
      </div>
    );
}) : (
  <div className="inner-input">
    <div className="container">
      <h1 className="search" >Search for song:
      </h1>
      <input ref={inputEl} size="50" type="text"/>
      <button class="btn btn-primary" onClick={fetchData} >Fetch</button>
    </div>
  </div>
)}

将topSongs.results.trackmatches.track.map()在何时呈现topSongs?.results?.trackmatches?.track.length > 0，否则将呈现<div className="inner-input">..</div>。

于 2020-11-30T18:52:37.297 回答