如何删除功能组件中的所有旧元素

Question

我需要在获取后删除所有带有 h1 的旧 div:

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

更新。这是 fetch(returns 正确的数据):

      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 并删除父元素

Answer 1

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> 将呈现。

如何删除功能组件中的所有旧元素

How to delete all old elements in functional component

fetch

reactjs

react-component

use-ref