在反应中使用 prompt() 但页面不断刷新

Question

所以我是一个反应初学者，我做了这个非常简单的项目，通过 JavaScript 中的“prompt()”function 获取某人的年龄，并将其传递给反应以渲染它。 您可以单击“更改年龄”按钮来更改屏幕上显示的年龄，这意味着它会给您另一个提示，您可以通过该提示重新输入年龄，然后新的年龄将显示在屏幕上。 一切正常，但由于 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 的任何解决方案都不在我的 scope 范围内

Answer 1

问题很简单，就是这一行： var ageInput = prompt("What Is Your Age?"); 位于 function 组件的“顶层”，因此在每次渲染时都会被调用。 这意味着显示提示 - 当您不希望它出现时。

React function 组件的顶层应该是一个“纯函数”，它从 props/state/etc 读取它需要的数据并返回代表你的 UI 的 JSX。 有副作用的东西，比如“提示”，应该从其他地方调用——或者从像你的changeAge这样的事件处理程序中调用（那部分在你的代码中绝对没问题）——或者从传递给useEffect挂钩的 function 中调用。

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 function 之前运行，因此会在用户响应提示之前显示在您的初始 UI 中。 我在上面放了 0，但你可以放任何你想要的东西——这可能并不重要，如果重要的话，你可以让 UI 显示一些稍微不同的东西，直到age保持一个合理的值。