React Hooks中useState与useEffect依赖冲突问题求解

方法一：将update加入useEffect的依赖数组并重置状态 #

问题核心是useEffect仅监听docs变化，但update的状态更新滞后于docs，导致触发useEffect时update仍为false。规范做法是把update也加入依赖数组，同时在逻辑执行完成后重置update，避免重复触发：

const [docs, setDocs] = useState(null);
const [update, setUpdate] = useState(false);

useEffect(() => {
  if (update) {
    // 执行你的业务逻辑
    // 示例：console.log("执行删除后的处理逻辑");
    
    // 逻辑完成后重置update，防止后续docs变化时重复触发
    setUpdate(false);
  }
}, [docs, update]); // 新增update到依赖列表

const deleteDocument = (a) => {    
  const newArray = a;
  setUpdate(true);
  setDocs(newArray);
};

方法二：移除update状态，直接利用docs的更新触发逻辑 #

如果update仅用于标记删除操作后的逻辑执行，可直接在deleteDocument中处理逻辑，或通过docs的变化判断是否执行：

const [docs, setDocs] = useState(null);

useEffect(() => {
  // 根据docs的变化执行逻辑，比如判断是否为删除后的新数组
  if (docs) {
    // 执行你的逻辑
  }
}, [docs]);

const deleteDocument = (a) => {    
  const newArray = a;
  setDocs(newArray);
  // 若逻辑无需等待docs更新完成，可直接在此调用
  // doYourLogic();
};

方法三：使用useRef追踪更新标记（可选） #

若想避免状态更新引发的额外渲染，可用useRef存储更新标记，不会触发组件重渲染：

const [docs, setDocs] = useState(null);
const updateRef = useRef(false);

useEffect(() => {
  if (updateRef.current) {
    // 执行你的逻辑
    updateRef.current = false; // 重置标记
  }
}, [docs]);

const deleteDocument = (a) => {    
  const newArray = a;
  updateRef.current = true;
  setDocs(newArray);
};

内容的提问来源于stack exchange，提问作者Eric Mitjans