如何在HTML标签中打印变量？为何变量a未定义？请排查代码问题

1. 如何在HTML标签中打印变量？ #

根据不同开发场景，实现方式分为两类：

• 原生HTML + JavaScript环境：
  • 方式一：通过DOM操作更新元素内容。先获取目标HTML元素，再用textContent（纯文本）或innerHTML（支持HTML标签）赋值：

    // 假设页面已有 <div id="result"></div>
    const userName = "John";
    document.getElementById("result").textContent = `Hello, ${userName}!`;
    

  • 方式二：用模板字符串拼接HTML代码，再插入到页面中：

    const productName = "Wireless Headphones";
    const htmlFragment = `<p>当前选中商品：${productName}</p>`;
    document.body.insertAdjacentHTML('beforeend', htmlFragment);
    

• React（JSX语法）环境：
  在JSX标签内部直接用大括号{}包裹变量即可，这是React识别JavaScript表达式的标准语法：

  const count = 5;
  return <div>当前计数：{count}</div>;
  

2. React组件代码问题分析 #

你的代码中，点击按钮后控制台能输出a的值，但页面始终显示undefined，核心原因是：
你用普通的let a声明变量，React函数组件不会监听普通变量的变化来触发重新渲染。

组件第一次渲染时，a未赋值，状态是undefined，页面渲染这个初始值；当点击按钮给a赋值时，变量本身确实被修改了，但这个变化不会通知React去重新渲染组件，所以页面上的{a}还是停留在初始的undefined状态，不会更新。

修复后的代码 #

使用React的useState钩子声明状态变量，状态更新会自动触发组件重新渲染：

import { useState } from 'react';

export default function Surah() {
  // 用useState定义状态变量a，初始值为undefined
  const [a, setA] = useState(undefined);
  
  const toDo = (id) => {
    // 通过setA更新状态，触发组件重新渲染
    setA(id);
    console.log(a);
  };

  return (
      <div>
        <div>
          <button onClick={() => toDo(1)}>点击设置值</button>
          <div>{a}</div>
        </div>
      </div>
  )
}

修改后，点击按钮调用setA(id)更新状态，React会重新渲染组件，页面就能显示最新的a值了。

内容的提问来源于stack exchange，提问作者Said Al-Ghiyats