React实现数字各位求和时出现Cannot read properties of null错误的解决咨询

你的代码出现Cannot read properties of null错误的核心原因是违背了React的工作逻辑：直接在组件函数顶层执行DOM查询，此时组件还没完成渲染，DOM元素还不存在，document.getElementById返回null，自然无法读取value属性。另外代码还有语法错误、事件绑定错误等问题，以下是具体修复方案：

问题拆解与修复步骤 #

• 抛弃直接DOM操作，改用React状态管理：React的核心是通过状态驱动视图，不要手动查询/修改DOM元素的值，用useState钩子管理输入和结果。
• 修正事件绑定问题：React事件采用驼峰命名（onClick而非onclick），且不能将组件自身作为点击事件处理函数，要单独定义处理逻辑。
• 修复变量语法错误：原代码中varvalue是语法错误，正确的变量声明应该是let value或const value。
• 添加输入合法性校验：处理用户输入非数字的情况，避免计算逻辑出错。

修正后的完整代码 #

import React, { useState } from "react";

function Sum() {
  // 用状态管理输入值和计算结果
  const [inputValue, setInputValue] = useState("");
  const [result, setResult] = useState("");

  // 定义点击事件处理函数
  const calculateSum = () => {
    let num = parseInt(inputValue);
    // 校验输入是否为有效数字
    if (isNaN(num)) {
      setResult("请输入有效数字");
      return;
    }

    let sum = 0;
    // 处理负数情况（取绝对值）
    num = Math.abs(num);
    while (num > 0) {
      sum += num % 10;
      num = Math.floor(num / 10);
    }
    setResult(sum.toString());
  };

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入数字"
      />
      <br />
      <br />

      <button onClick={calculateSum}>Calculate</button>
      <br />
      <br />

      <input type="text" readOnly value={result} />
    </>
  );
}

export default Sum;

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