Поведение случайных компонентов - PullRequest
Новая
       6

Поведение случайных компонентов

1 голос
/ 11 марта 2019

У меня есть 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;

1 Ответ

1 голос
/ 11 марта 2019

Ваш код работает нормально, как показано в этом примере: 

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); давая вам предыдущее состояние.

...