React Js 中的丢失状态

Question

我有一个有 2 个输入的应用程序；名称和密码。另外，我有一个保存按钮，它应该使用父组件中的输入值来更改状态。

但是现在，如果我在一个输入中只插入一个值，我会丢失父组件中的状态。例如，如果我只输入名称，然后单击保存按钮，在父组件中我会丢失密码值，但我不知道为什么。

如何使用我的代码避免这种情况？

import React, { useEffect } from "react";
import "./styles.css";

const Test = ({ user, setUser }) => {
  const [u, setU] = React.useState("");
  const [p, setP] = React.useState("");

  function name(e) {
    const a = e.target.value;
    setU(a);
  }

  function password(e) {
    const a = e.target.value;
    setP(a);
  }

  function save() {
    console.log(u);
    setUser({ ...user, name: u, password: p });
  }

  return (
    <div>
      <input onChange={name} />
      <input onChange={password} />
      <button onClick={save}>save</button>
    </div>
  );
};

export default function App() {
  const [user, setUser] = React.useState({
    name: "",
    password: ""
  });
  useEffect(() => {
    setUser({ name: "john", password: "Doe" });
  }, []);
  return (
    <div className="App">
      <p>{user.name}</p>
      <p>{user.password}</p>

      <Test user={user} setUser={setUser} />
    </div>
  );
}

代码链接：https://stackblitz.com/edit/react-ytowzg

Answer 1

这应该可以解决您的问题：

  function save() {
    console.log(u);
    if(u === '') {
      setUser({ ...user, password: p });
    } else if (p === '') {
      setUser({ ...user, name: u });
    } else {
      setUser({ ...user, name: u, password: p });
    }
  }

因此，现在状态会根据输入字段的值有条件地更新。您的代码的问题在于，无论输入值如何，您总是会覆盖状态。

Answer 2

我有一个更好的提议，而不是为名称、密码和百分比使用单独的状态变量，而是使用单个状态变量对象

Test.js

  import React, { useState } from "react";
    import { InputNumber } from "antd";
    import "antd/dist/antd.css";

    const Test = ({ user, setUser }) => {
      const [state, setState] = useState({
        name: "",
        password: "",
        percentage: ""
      });

      function onChange(e, name) {
        setState({
          ...state,
          ...(name === undefined
            ? { [e.target.name]: e.target.value }
            : { [name]: e })
        });
        console.log(state);
      }

  function save() {
    setUser({
      ...user,
      ...(state.name !== "" && { name: state.name }),
      ...(state.password !== "" && { password: state.password }),
      ...(state.percentage !== "" && { percentage: state.percentage })
    });
  }


      return (
        <div>
          <input name='name' onChange={onChange} />
          <input name='password' onChange={onChange} />
          <InputNumber
            defaultValue={100}
            min={0}
            max={100}
            formatter={value => `${value}%`}
            parser={value => value.replace("%", "")}
            onChange={e => onChange(e, "percentage")}
          />
          <button onClick={save}>save</button>
        </div>
      );
    };

export default Test;

更新了 CodeSandbox here