在React中如何正确使用getElementById解决Chart.js调用报错问题？

• React 基于虚拟DOM实现渲染逻辑，你直接调用document.getElementById拿真实DOM时，大概率对应DOM节点还没完成挂载到页面的流程，所以返回值为null，调用方法就会抛出你遇到的错误。同时直接修改innerHTML也不符合React的声明式开发规范，后续React触发重渲染时会覆盖你手动修改的内容。

1. Chart.js 相关逻辑改写 #

改用React的useRef钩子绑定DOM节点，在DOM挂载完成后再执行初始化逻辑，以函数组件为例：

import { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

function YourComponent() {
  // 绑定canvas节点的ref
  const mathChartRef = useRef(null);

  useEffect(() => {
    // 确保DOM挂载完成后再操作
    if (mathChartRef.current) {
      const ctx = mathChartRef.current.getContext('2d');
      // 这里写你原本的Chart初始化逻辑
      new Chart(ctx, {
        // 你的图表配置
      });
    }
  }, []); // 空依赖数组保证只在组件挂载完成后执行一次

  return (
    <div>
      {/* 把ref绑定到对应的canvas元素上，不用再写id */}
      <canvas ref={mathChartRef} />
    </div>
  )
}

2. innerHTML 相关逻辑改写 #

不要手动操作DOM修改内容，改用React的状态驱动渲染：

import { useState } from 'react';

function YourComponent() {
  // 用state存温度值
  const [currentTemp, setCurrentTemp] = useState(0);

  // 你要更新温度的时候直接改state就行，React会自动更新视图
  const updateTemp = () => {
    // 比如这里获取到新的温度值
    const newTemp = 26;
    setCurrentTemp(newTemp);
  }

  return (
    <div>
      {/* 直接在JSX里渲染状态值，不用手动改innerHTML */}
      <div id="houseTemp">${currentTemp}</div>
    </div>
  )
}

如果你的逻辑封装在单独的函数里，直接在组件顶层调用的话，此时组件还没开始渲染DOM，肯定拿不到对应节点。你可以把ref或者状态作为参数传入你的封装函数，然后放到useEffect里执行，保证调用时DOM已经完成挂载。
示例：

// 你单独封装的工具函数
import { initChart, updateTempText } from './yourUtils';

function YourComponent() {
  const mathChartRef = useRef(null);
  const [currentTemp, setCurrentTemp] = useState(0);

  useEffect(() => {
    if (mathChartRef.current) {
      // 把ref作为参数传入封装的初始化函数
      initChart(mathChartRef.current);
    }
  }, []);

  // 温度更新时调用封装函数，把新值传给setState
  const handleTempChange = (newVal) => {
    const formattedVal = updateTempText(newVal);
    setCurrentTemp(formattedVal);
  }

  return (
    <div>
      <canvas ref={mathChartRef} />
      <div>${currentTemp}</div>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者subprimeloads