Блог

Главная - Вопросы по программированию - Ошибка типа: Не удается уничтожить свойство «заголовок «» треков[trackIndex]», поскольку оно не определено — ReactJS

Ошибка типа: Не удается уничтожить свойство «заголовок «» треков[trackIndex]», поскольку оно не определено — ReactJS

#javascript #reactjs #object #react-hooks

Вопрос:

Я хочу установить индекс трека на номер песни в очереди, но при setTrackIndex этом я получаю ошибку типа, и я не могу trackIndex напрямую манипулировать, потому что это постоянная переменная. есть ли какой-нибудь способ сделать то, что я делаю? это то, что я пытаюсь, но получаю ошибку.

 const [trackIndex, setTrackIndex] = useState(0)
const { title, artist, image, audioSrc } = tracks[trackIndex]
var i = 0
 
 {tracks.map(track => {
  i  
  return (
    <div className="song-details-artwork queue-next">
        <div className="art">
            <img style={{ width: "100%" }} src={track["image"]} alt="" />
        </div>
        <div onClick={() => {setTrackIndex(i)} className="song-names">
              <div className="queue-song-name">{track["title"]}</div>
              <div className="queue-song-name">{track["artist"]}</div>
        </div>
    </div>
  )
})}

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

1. Тебе нужно разобраться undefined с делом. Одним из способов сделать это может быть: const { title, artist, image, audioSrc } = tracks[trackIndex] ?? {}

2. да, но теперь он не устанавливает индекс трека и возвращает пустой.

3. Второй параметр .map() -это индекс элемента. Нет необходимости поддерживать отдельный индекс. Я бы рискнул предположить, что это каким-то образом не удается, потому что индекс, который вы поддерживаете, неверен. Потому что нет смысла сопоставлять массив и индекс, которые должны быть там, чтобы ничего не возвращать из массива.

4.Можете ли вы показать нам данные в tracks ? И tracks[trackIndex] undefined , в первую очередь, почему?

5. Ах, на самом деле это неправильно, потому что вы увеличиваете индекс, прежде чем использовать его. Таким образом, вы сопоставляете массив на основе нуля и используете для него индексы на основе одного. Последний был бы за пределами, потому что он был бы один по длине.


Ответ №1:

Как указано в комментариях, вы должны обрабатывать undefined случай (в другом месте, а не в компоненте, в котором вы выполняете рендеринг), т. е. Когда у вас tracks есть undefined или null .

В то время как этот код может обрабатывать пустой массив… это просто ничего не покажет, так что было бы здорово, если бы у вас была доступная отладка.

Ваш код может быть немного улучшен, чтобы:

 {tracks.map((track,index)=> (
   <div className="song-details-artwork queue-next">
     <div className="art">
       <img style={{ width: "100%" }} src={track["image"]} alt="" />
     </div>
     <div onClick={() => {setTrackIndex(index)} className="song-names">
        <div className="queue-song-name">{track["title"]}</div>
        <div className="queue-song-name">{track["artist"]}</div>
     </div>
   </div>))}

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

1. » Как указано в комментариях, вы должны справиться с неопределенным случаем » Я не согласен. Нет никакого логического смысла справляться с этим. Потому что это означает, что у вас есть трек, который при использовании ничего не возвращает. Это ошибка. То, что трек, который не работает, не выдает ошибку, скрывает ошибку. Это не решает проблему.

2. Его не нужно обрабатывать в этом компоненте, но его нужно обрабатывать где-то в другом месте, извиняюсь за расплывчатость, внесу поправку. Спасибо 🙂

3. ДА. OP должен использовать map » s index «вместо» их i » (в вопросе).

Метки: ,