React中使用prompt()时页面反复刷新、后续输入值不生效问题求助

问题根源 #

你的代码出现死循环弹prompt、输入值不生效的核心原因是：你将prompt()直接写在了组件函数的顶层。

React组件每次渲染时都会完整执行一遍函数体内的所有顶层代码：

1. 你调用setAge更新状态会触发组件重渲染
2. 重渲染时就会再次执行顶层的prompt()弹出输入框
3. 另外开发环境下<React.StrictMode>会默认让组件挂载阶段执行两次渲染，也会导致页面刚加载就弹出两次输入框
4. 而useState的初始值仅在组件第一次渲染时生效，后续重渲染时会忽略你在顶层prompt输入的新值，所以会出现输入不生效的错觉。

修复方案 #

把初始获取年龄的逻辑放到useEffect钩子中，传入空依赖数组即可保证这部分逻辑仅在组件首次挂载完成后执行1次，不会跟着重渲染反复触发。不需要引入Redux等额外工具，仅调整App.js逻辑即可。

修正后App.js完整代码 #

import { useState, useEffect } from 'react';

function App() {
  // 初始值可以设为null，也可以根据需求设默认值比如0
  const [age, setAge] = useState(null);

  // 空依赖数组保证仅首次挂载执行一次
  useEffect(() => {
    const initAge = prompt("What Is Your Age?");
    setAge(initAge);
  }, []);

  const changeAge = () => {
    setAge(prompt("What Is Your Age?"));
  }

  // 可选：避免age未初始化时显示异常
  if (age === null) return <div>加载中...</div>;

  return (
    <div className="app">
      <h1 style={{textAlign: "center"}}>Homepage</h1>
      <p>Mario is {age} years old!</p>
      <button onClick={changeAge}>Change Age</button>
    </div>
  )
}

export default App

内容的提问来源于stack exchange，提问作者Memelord The First