next.js 如何在html标记中打印变量

nbewdwxp  于 2022-11-23  发布在  其他
关注(0)|答案(2)|浏览(141)

为什么变量a未定义?

export default function Surah() {
  let a;
  const toDo= (id) => {
    a = id;
    console.log(a);
  };

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

你能解释一下我的代码有什么问题吗?

polkgigr

polkgigr1#

这不是一个使用变量的最佳方式。相反,我们应该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>
  )
}
qnakjoqk

qnakjoqk2#

您需要使用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>
  )
}

相关问题