Блог

Главная - Вопросы по программированию - Как удалить все старые элементы в функциональном компоненте

Как удалить все старые элементы в функциональном компоненте

#reactjs #fetch #react-component #use-ref

#reactjs #выборка #реагирующий компонент #используйте-ref

Вопрос:

Мне нужно удалить все старые divs с помощью h1 после выборки:

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

upd. Вот выборка (возвращает правильные данные):

       let sTrack = inputEl.current.value;
        sTrack = sTrack.replace(/ /g," ");
        try {
          const response = await fetch(
            `http://ws.audioscrobbler.com/2.0/?method=track.searchamp;track=${sTrack}amp;api_key=a3c9fd095f275f4139c33345e78741edamp;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 amp;amp;
          topSongs.results.trackmatches.track.map((datumn) => {
            return (
                <div key={datumn.name}>
                                  <h1 className='heading'>{datumn.name}</h1>
              </div>
            );
          })}
      </div>
    )
  }

Я попробовал useRef и удалить родительский элемент

Комментарии:

1. Какие старые фрагменты? Вы исключили самую важную часть кода. Что fetchData делает? Как проходит topSongs съемочная площадка? Непонятно, о чем вы спрашиваете.

2. inputEl используется в качестве ссылки в каком компоненте?

3. Насколько я понимаю, вы хотите отображать только те <div className="inner-input"> , когда вы еще не извлекли данные, и только <h1 className="heading"> элементы после вас fetchData() ?

Ответ №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> случае будет.

Метки: