Question

我有2个组件，问题是在第一次提交单击时我无法setUser（），（尽管addUser参数给出了正确的值）它保持原始状态”，”，但是如果我再次单击它它正确更改。我不知道自己在做什么错，这是我的第一个问题，对不起，如果格式不正确。

import React, { useState, useEffect } from "react";
import "./notes.css";
import UserNameMailForm from "./userNameMailForm";

const NoteApp = props => {
  const [user, setUser] = useState({
    userName: "",
    email: ""
  });

  const addUser = (userName, email) => {
    const newUser = { userName, email };
    setUser(newUser);
    console.log(user);
    console.log(userName, email);
  };
  return (
    <div className="container p-0">
      <div className="screen pt-2">
        <p>Users</p>
      </div>
      <UserNameMailForm addUser={addUser} />
    </div>
  );
};

export default NoteApp;

第二个组件是这个：

import React, { useState, useEffect } from "react";

const UserNameMailForm = ({ addUser }) => {
  const [userName, setUsername] = useState("");
  const [email, setEmail] = useState("");

  useEffect(() => {}, []);

  const handleSubmit = e => {
    e.preventDefault();
    addUser(userName, email);
  };

  return (
    <form onSubmit={handleSubmit} className="form-group">
      <input
        type="text"
        className="form-control"
        placeholder="User name"
        value={userName}
        onChange={e => setUsername(e.currentTarget.value)}
      />
      <input
        type="text"
        className="form-control"
        placeholder="email"
        value={email}
        onChange={e => setEmail(e.currentTarget.value)}
      />
      <button type="submit" className="btn btn-outline-danger">
        Add
      </button>
    </form>
  );
};

export default UserNameMailForm;

Answer 1

您的代码工作正常，如以下示例所示：

const { useState } = React;

const NoteApp = props => {
  const [user, setUser] = useState({
    userName: "",
    email: ""
  });

  const addUser = (userName, email) => {
    const newUser = { userName, email };
    setUser(newUser);
  };

  return (
    <div className="container p-0">
      <div className="screen pt-2">
        <p>Users</p>
        {JSON.stringify(user)}
      </div>
      <UserNameMailForm addUser={addUser} />
    </div>
  );
};

const UserNameMailForm = ({ addUser }) => {
  const [userName, setUsername] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    addUser(userName, email);
  };

  return (
    <form onSubmit={handleSubmit} className="form-group">
      <input
        type="text"
        className="form-control"
        placeholder="User name"
        value={userName}
        onChange={e => setUsername(e.currentTarget.value)}
      />
      <input
        type="text"
        className="form-control"
        placeholder="email"
        value={email}
        onChange={e => setEmail(e.currentTarget.value)}
      />
      <button type="submit" className="btn btn-outline-danger">
        Add
      </button>
    </form>
  );
};

ReactDOM.render(<NoteApp />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

问题在于setUser是异步的，而user是对先前user对象的引用，该对象将作为您作为初始值传递给useState的对象，这就是console.log(user);为您提供先前状态的原因。

随机成分行为

1 个答案: