为什么我无法使用 useState 设置状态并将状态同时发送到 firebase 实时数据库？答案

【问题标题】：Why am I not able to set my state using useState and send the state to firebase realtime database at the same time?为什么我无法使用 useState 设置状态并将状态同时发送到 firebase 实时数据库？
【发布时间】：2021-12-29 02:39:10
【问题描述】：

我在 firebase 中收到请求，但它只显示空结果（在 useState 挂钩中初始化）。即使我使用 async/await 来获取，它也总是显示先前状态的输出。

const [user, setUser] = useState({
    name: "",
    phone: "",
  });

async function postData(data) {

    setUser(data);

    const { name, phone } = { ...user };

    const res = await fetch(
      "https://react-form-f1d90-default-rtdb.firebaseio.com/react-form.json",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name,
          phone,
        }),
      }
    );
    if (res) {
      console.log("success");
      alert("success");
    }
  }

【问题讨论】：

你在哪里打电话？

标签： reactjs firebase firebase-realtime-database use-state

【解决方案1】：

setState 是异步发生的，因此您无法设置该值并在下一行中使用它，您必须等待下一次重新渲染。在这里，您应该直接使用来自data 的值，而不是从状态中获取它。或者，您可以在 useEffect 钩子中执行 api 获取，您将在其中观察 user 状态的任何变化。如下所示

useEffect(() => { //Make the fetch call here using state value }, [user])

【讨论】：

【解决方案2】：

正如 Vishnu 已经回答的那样，在 React 中设置状态是一个异步操作，所以当你的 const { name, phone } = { ...user } 运行时，状态还没有更新。

相反，您可以直接从data 读取相同的属性：

setUser(data);

const { name, phone } = { ...data };

【讨论】：