React新手求助：如何将函数内计算值渲染至页面？

你的问题出在tot是普通变量，React不会追踪普通变量的变化。当你在handleClick里修改tot时，虽然控制台能打印出正确结果，但组件不会触发重渲染，所以页面上的<p>{tot}</p>始终显示初始值0。

解决方法一：将tot改为状态变量 #

使用useState声明tot，点击按钮时通过状态更新函数修改它，这样React会监听状态变化并触发重渲染：

import { useState } from "react";

function Box() {
    const [num1, setNum1] = useState(0);
    const [num2, setNum2] = useState(0);
    const [tot, setTot] = useState(0); // 改为状态变量

    function handleClick() {
        const result = Number(num1) + Number(num2);
        setTot(result); // 更新状态
        console.log(result);
    }

    return (
        <div className="box">
            <input 
                type="text" 
                name="num1" 
                className="form-control" // React中用className代替class
                onChange={(event) => setNum1(event.target.value)}
            />
            <input 
                type="text" 
                className="form-control"
                onChange={(event) => setNum2(event.target.value)}
            />
            <p>{tot}</p>
            <button onClick={handleClick} className="btn btn-warning"> Click Me</button>
            <h1>Box.....</h1>
        </div>
    );
}

export default Box;

解决方法二：直接在渲染时计算（无需额外状态） #

如果不需要保存计算结果，也可以直接在JSX中实时计算，省去tot变量：

import { useState } from "react";

function Box() {
    const [num1, setNum1] = useState(0);
    const [num2, setNum2] = useState(0);

    return (
        <div className="box">
            <input 
                type="text" 
                name="num1" 
                className="form-control"
                onChange={(event) => setNum1(event.target.value)}
            />
            <input 
                type="text" 
                className="form-control"
                onChange={(event) => setNum2(event.target.value)}
            />
            {/* 直接在渲染时计算 */}
            <p>{Number(num1) + Number(num2)}</p>
            <button className="btn btn-warning"> Click Me</button>
            <h1>Box.....</h1>
        </div>
    );
}

export default Box;

额外注意点 #

• React元素的类名要用className代替原生HTML的class，这是React的规范要求。
• 初始化useState时建议给默认值（比如useState(0)），避免初始值为undefined导致计算出错。

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