Блог

Главная - Вопросы по программированию - Объект, возможно, «нулевой». TS2531 Реагирует с машинописным текстом

Объект, возможно, «нулевой». TS2531 Реагирует с машинописным текстом

#javascript #reactjs #typescript

Вопрос:

Я создаю приложение с помощью React и TypeScript … Когда я пытаюсь .innerHTML или что-то в тексте, я получаю эту ошибку:

Объект, возможно, «нулевой». TS2531

Я новичок в машинописи и не знаю, что мне делать, я знаю, что это связано с интерфейсом … но я не могу найти конкретного решения.

Если кто-то сможет решить мою проблему с моим кодом, это было бы здорово.

Заранее спасибо. Я позволил своему коду ниже:

 const Home: FC = () => {
      const percentage = 91;
    
      const startingMinutes = 25;
      let time = startingMinutes * 60;
      const countdownEl = document.getElementById("countdown");
    
      const updateCountDown = () => {
        const minutes = Math.floor(time / 60);
        let seconds = time % 60;
        
        countdownEl.innerHTML=`${minutes}: ${seconds}`;
        time--;
      };
    
      const changeTimer = () => {
        var timer = document.getElementById("countdown");
        var time = document.getElementById("time");
    
        // timer.innerText=time;
      };

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

1. Я согласен с @David Remie, кастинг должен быть проведен. Также я думаю, что вы пытаетесь ссылаться на элемент DOM, даже до того, как он будет смонтирован. Попробуйте получить доступ к элементу DOM с помощью ссылки или в крючке useEffect или useLayoutEffect.

Ответ №1:

document.getElementById теоретически может возвращать значение null, если не существует элемента с заданным идентификатором.

TypeScript достаточно умен, чтобы видеть, что вы не выполняете никакой проверки перед использованием потенциального нулевого объекта, countdownEl.innerHTML=`${minutes}: ${seconds};` т. Е.

Есть 2 основных способа исправить это:

  1. Защитите свой код, if (countdownEl) {} чтобы убедиться, что соответствующий код выполняется только тогда, когда countdownEl он соответствует действительности.
  2. Явно приведите результат document.getElementById if, если «всегда» должно возвращать ненулевое значение, т. е. const countdownEl = document.getElementById("countdown") as HTMLElement;

Ответ №2:

Вам нужно только убедиться, что .innerText единственное выполняется, когда timer не равно null, простая инструкция if сделает свое дело. if(timer){timer.innerText = time }

Метки: , ,