随机组件行为

Question

我有 2 个组件，问题是在第一次提交时我无法设置用户（），（尽管 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 对象的引用，它将是您作为初始值传递给 [=15 的对象=]，所以这就是为什么 console.log(user); 给你之前的状态。

随机组件行为

Random Component Behavior

reactjs

react-hooks