如何让 React 状态数组永久更新答案

【问题标题】：How to get React state array to permanently update如何让 React 状态数组永久更新
【发布时间】：2021-10-23 08:31:27
【问题描述】：

我正在学习 Node 和 React，现在知道如何集成它们，并且正在努力使用 Node 和 React 进行注册和登录。我正在一步一步地进行，所以目前我正在尝试至少获取输入并将它们作为数组放入状态，然后在我得到之后我将去散列密码，将数据发送到 Node 和数据库等。

不过，目前我有点卡在这里。我正在尝试将用户名和密码输入我的“详细信息”状态，然后将其呈现在屏幕上（或控制台记录它，或其他），但是当我这样做时，它会很快显示然后消失。为什么详细信息状态恢复为空数组？我如何解决它？我在这里做了一些研究，但无法弄清楚。

import { useState } from 'react';

function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [details, setDetails] = useState([]);

  const readUsername = (e) => {
    setUsername(e.target.value);
  }

  const readPassword = (e) => {
    setPassword(e.target.value);
  }

  const updateDetails = () => {
    setDetails([username, password]);
  }

  return (
    <div>
      <h1>Register</h1>
      <form>
        <label htmlFor="username" name="username">Username: </label>
        <input htmlFor="username" name="username" onChange={readUsername} />
        <br/>
        <label htmlFor="password" name="password">Password: </label>
        <input htmlFor="password" name="password" type="password" onChange={readPassword} />
        <br/>
        <button onClick={updateDetails}>Submit</button>
      </form>
      <h1>{details}</h1>
    </div>
  );
}

export default App;

【问题讨论】：

我的猜测是因为您没有将值绑定到输入，例如：<input htmlFor="username" name="username" onChange={readUsername} value={username} />。话虽如此，我始终建议不要维护冗余状态，details 纯粹源自username 和password。

标签： javascript reactjs input state

【解决方案1】：

您想创建一个受控输入，因此您应该传递value={password} 属性

像这样：

<input htmlFor="username" name="username" onChange={readUsername} value={username} />

另外，我会改变你处理表格的方式。将按钮更改为type="submit" 像这样 <button type="submit">Submit</button>

然后处理来自<form>的提交

像这样：

<form onSubmit={(event) => updateDetails(event)}

然后在函数上，可以像这样使用提交事件

const updateDetails = (e) => {
event.preventDefault()
...rest of logic
}

【讨论】：

【解决方案2】：

在您输入的 onChange 处理程序中，它被视为“受控”组件。您还需要分配 value 属性。

<input onChange={readUsername} value={username} />

【讨论】：

【解决方案3】：

React 中的表单具有 HTML 中的默认行为：提交时刷新页面。

React 状态只存在于组件的生命周期中。刷新页面时，组件被卸载，状态丢失。

要防止页面刷新，请使用函数来处理表单提交，并防止默认行为。

const handleSubmit = (e) => {
  e.preventDefault();
}

return (
  ...
    <form onSubmit={handleSubmit}>
      ...
    </form>
  ...
  );
}

View demo on codesandbox

进一步阅读：

【讨论】：