使用 react-hook 调用 setState 后如何使用更新的状态

Question

如何在 setState 调用后使用更新的状态。 在我下面的代码中，我得到了以前的状态值。 对于以下技术的数组有效。

setState(currentState => [...currentState, {name, value}]);

但是对于对象，它不起作用。

import React, { useState } from "react";

export default function App() {
const [state, setState] = useState({});
const handleChange = e => {
  const { name, value } = e.target;
  setState(currentState => ({ ...currentState, [name]: value }));
  console.log(state[name]);
};
const handleSubmit = e => {
  e.preventDefault();
  console.log(state);
};
return (
  <div className="App">
    <form onSubmit={handleSubmit}>
     a
     <input
      type="text"
      name="a"
      value={state["a"] || ""}
      onChange={handleChange}
     />
     b
     <input
      type="text"
      name="b"
      value={state["b"] || ""}
      onChange={handleChange}
     />
     <button type="submit">Save</button>
   </form>
 </div>
);
}

Answer 1

你可以这样做： setState({ ...state, [name]: value }); 它应该适用于对象

Answer 2

您可以在状态更新后利用useEffect做一些事情。

const [state, setState] = useState({});

...

useEffect(() => {
   console.log('Do something after state has changed', state);
}, [state]);

PS：这将在第一次渲染中运行。

Answer 3

您可以查看此代码以供参考。 https://codesandbox.io/s/sleepy-saha-q7h72

function App() {
  const [state, setState] = React.useState({ firstName: "", lastName: "" });

  const handleChange = e => {
    setState({ ...state, [e.target.name]: e.target.value });
  };
  return (
    <div className="App">
      <input
        type="text"
        placeholder="first name"
        onChange={handleChange}
        value={state.firstName}
        name="firstName"
      />
      <br />
      <input
        type="text"
        placeholder="last name"
        onChange={handleChange}
        value={state.lastName}
        name="lastName"
      />
      <hr />
      {state.firstName}--{state.lastName}
    </div>
  );
}