在react中使用prompt()，但页面不断刷新

Question

所以我是一个反应的初学者，我做了这个非常简单的项目，通过"prompt()"函数，并将其传递到渲染器中；改变年龄"；按钮更改屏幕上显示的年龄，这意味着它会给您另一个提示，您可以通过该提示重新输入年龄，然后新的年龄将显示在屏幕上。一切都很好，但由于react不断重新呈现我的页面，它会多次显示提示。如果在第一个年龄之后的提示中键入任何年龄，则屏幕上的年龄不会更改。我的猜测是，发生这种情况可能是因为在react的虚拟dom有时间连接到真实dom之前出现了提示，因此您在这些提示中输入的任何值都将被完全忽略。这可能是一些愚蠢的小问题，我自己无法解决，任何帮助都将不胜感激！

这是App.js:

import {useState} from 'react';
function App() {
var ageInput = prompt("What Is Your Age?");
const [age, setAge] = useState(ageInput);
const changeAge = () => {
setAge(prompt("What Is Your Age?"));
}
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

这里是index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

PS：我还不知道Redux，所以任何涉及Redux的解决方案都不在我的范围内，不幸的是

Answer 1

问题很简单，这一行：var ageInput = prompt("What Is Your Age?");位于"顶级"；函数组件，因此在每次渲染时都会被调用。这意味着当你不希望它出现时，会显示提示。

React功能组件的顶层应该是"；纯函数"；它从props/state/etc读取所需的数据，并返回表示您的UI的JSX。有副作用的东西，比如"；"提示"；，应该从其他地方调用——要么在像changeAge这样的事件处理程序中调用(该部分在代码中是完全正确的)——要么在传递给useEffect钩子的函数中调用。

useEffect是我在这里推荐的。您似乎只想要这个提示，而不需要先点击以设置"；初始状态"；您的组件。因此，使用带有空数组第二个参数的useEffect，在组件第一次安装时也调用changeAge，而不是之后。你的组件最终会变成这样：

function App() {
const [age, setAge] = useState(0);
const changeAge = () => {
setAge(prompt("What Is Your Age?"));
}
useEffect(changeAge, []);
return (
<div className="app">
<h1 style={{textAlign: "center"}}>Homepage</h1>
<p>Mario is {age} years old!</p>
<button onClick={changeAge}>Change Age</button>
</div>
)
}

唯一的小缺点是你需要一个"；初始年龄"；传递给useState，它在useEffect函数之前运行，因此在用户响应提示之前，它将显示在初始UI中。我在上面放了0，但你可以放任何你想要的东西——这可能并不重要，如果是这样，你可以让UI显示一些稍微不同的东西，直到age保持一个合理的值。