React中如何将状态传递到JSX，实现状态变化时自动更新渲染？

• 变量作用域限制：你在funFact函数内部声明的funFactoid是局部变量，仅在funFact函数内部可访问，组件return部分无法读取该变量
• React渲染规则：普通JavaScript变量的修改不会触发组件重新渲染，只有状态（state）更新时，React才会重新执行组件渲染逻辑，把最新的数据同步到页面上

使用React内置的useState Hook存储趣闻数据，修改后的完整代码如下：

// 第一步：导入useState Hook
import { useState } from 'react';

function About(props) {
  // 第二步：定义状态，第一个参数是状态值，第二个是更新状态的方法
  const [funFactoid, setFunFactoid] = useState('');

  function funFact() {
    function randomIntFromInterval(min, max) { 
      return Math.floor(Math.random() * (max - min + 1) + min)
    }
    const randomNumber = randomIntFromInterval(0, 4);
    const factArray = ["A", "B", "C", "D", "E"];
    // 第三步：调用更新方法修改状态，触发组件重新渲染
    setFunFactoid(factArray[randomNumber]);
  }

  return (
    <div>
      <button onClick={funFact}>Click me for a fun fact!</button>
      <p>{ funFactoid }</p>
    </div>
  )
}
 
export default About;

• 初始状态你可以根据需求调整，如果想页面加载就默认显示一条趣闻，把useState('')改成useState(factArray[0])即可
• 工具函数randomIntFromInterval也可以提到组件外部定义，避免每次组件渲染重复创建函数

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