React组件中如何在第二个useEffect中获取更新后的state？

问题根源 #

你的第二个useEffect依赖数组里只有depdency2，这意味着它只会在组件首次挂载、以及depdency2的值发生变化时执行。当第一个useEffect触发setEditData更新editData后，depdency2没有变化，所以第二个useEffect不会重新执行。再加上React闭包的特性，这个useEffect会捕获组件初始渲染时的editData值，自然打印的是初始的initData。

解决方案 #

方案1：将editData加入第二个useEffect的依赖数组 #

如果需求是只要editData更新或者depdency2变化，就执行第二个useEffect的逻辑，直接把editData添加到依赖数组里即可：

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function MyComponent() {
  const [editData, setEditData] = useState("initData");

  const depdency1 = "depdency1";
  const depdency2 = "depdency2";

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

  const mufuction = () => {
    setEditData("Updated Data");
  };

  // 把editData加入依赖数组
  useEffect(() => {
    console.log("editData", editData);
  }, [depdency2, editData]);

  return <div className="App"></div>;
}

这样每当editData或depdency2变化时，这个useEffect都会重新执行，打印出最新的editData值。

方案2：用useRef保存state的最新引用 #

如果需求是只在depdency2变化时执行第二个useEffect，但要在里面获取最新的editData值，可以借助useRef来存储state的实时引用：

import React, { useEffect, useState, useRef } from "react";
import "./styles.css";

export default function MyComponent() {
  const [editData, setEditData] = useState("initData");
  // 定义ref保存editData的最新值
  const editDataRef = useRef(editData);

  const depdency1 = "depdency1";
  const depdency2 = "depdency2";

  // 每次editData更新时，同步更新ref的current值
  useEffect(() => {
    editDataRef.current = editData;
  }, [editData]);

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

  const mufuction = () => {
    setEditData("Updated Data");
  };

  useEffect(() => {
    // 通过ref.current获取最新的editData
    console.log("editData", editDataRef.current);
  }, [depdency2]);

  return <div className="App"></div>;
}

useRef的current属性是可变的，不会受React渲染周期闭包的影响，所以能始终拿到最新的editData值。

内容的提问来源于stack exchange，提问作者Rohit Verma