对象可能为“空”。 TS2531 与 TypeScript 反应答案

【问题标题】：Object is possibly 'null'. TS2531 React with TypeScript对象可能为“空”。 TS2531 与 TypeScript 反应
【发布时间】：2021-09-29 15:14:06
【问题描述】：

我正在使用 React 和 TypeScript 构建一个应用程序......当我尝试 .innerHTML 或 innerText 时，我得到了这个错误：

对象可能是“空”。 TS2531

我是 TypeScript 的新手，我不知道我应该做什么，我知道这与界面有关......但我找不到具体的解决方案。

如果有人能用我的代码解决我的问题，那就太好了。

提前致谢。我让我的代码如下：

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;
      };

【问题讨论】：

我同意@David Remie，需要进行选角。此外，我认为您正在尝试引用 DOM 元素，甚至在它安装之前。尝试使用 ref 或在 useEffect 或 useLayoutEffect 钩子中访问 DOM 元素。

标签： javascript reactjs typescript

【解决方案1】：

document.getElementById 理论上可以在不存在具有给定 id 的元素时返回 null。

TypeScript 足够聪明，可以看到您在使用潜在的 null 对象（即 countdownEl.innerHTML=`${minutes}: ${seconds};` ）之前没有执行任何验证。

有两种主要方法可以解决此问题：

使用if (countdownEl) {} 保护您的代码，以确保只有在countdownEl 为真时才会执行相应的代码。
如果应该“总是”返回非空值，则显式转换document.getElementById 的结果，即const countdownEl = document.getElementById("countdown") as HTMLElement;

【讨论】：

【解决方案2】：

您只需要确保.innerText 仅在timer 不为空时运行，一个简单的if 语句就可以解决问题。 if(timer){timer.innerText = time }

【讨论】：