这不是一个使用变量的最佳方式。相反，我们应该useState挂钩。我附上下面的代码片段供您参考。

import {useState} from "react";

export default function Surah() {
  const [a,setA] = useState(0); // Initialize it with a number
  const Tafsir = (id) => {
    setA(id);
  };

  return (
      <div>
        <div>
          <button onClick={() => {
           Tafsir(1);
           console.log(a);
          }}>Click Here</button>
          <div>{a}</div>
        </div>
      </div>
  )
}

您需要使用a作为状态变量。
更改变量值不会触发组件使用更新后的值再次呈现，对于此更新后的值，您需要使用setState再次呈现组件。

import {useState} from "react";

export default function Surah() {
  const [a, setA] = useState();
  const toDo= (id) => {
    setA(id);
  };

  return (
      <div>
        <div>
          <button onClick={() => toDo(1)}>Click here</button>
          <div>{a}</div>
        </div>
      </div>
  )
}