钩子状态数组更新后未触发 useEffect

在 React 中，我们通常会使用 useState 和 useEffect 钩子来管理组件的状态和副作用。

useState 钩子提供了一个方式来保存组件状态，并且每当状态发生变化时，React 会重新渲染组件。

useEffect 钩子则用于处理副作用，例如数据获取、事件监听以及 DOM 操作等。它会在组件渲染后执行，并且在组件销毁前进行清理。

然而，在某些情况下，我们可能会遇到钩子状态数组更新后未触发 useEffect 的问题。以下是可能导致这种情况的几种常见原因以及如何解决它们的方法。

1. 状态改变的值没有被传递到依赖数组中

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(count);
}, []);

在上面的例子中，由于 count 没有被加入到依赖数组里面，所以 useEffect 钩子的函数体仅会在组件的初始渲染时调用一次。如果我们希望每当 count 改变时都执行 useEffect 钩子的函数体，我们需要将 count 添加到依赖数组中：

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(count);
}, [count]);

2. 标识了依赖数组，但状态没有实际变化

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

useEffect(() => {
  console.log(user.name);
}, [user]);

在上面的例子中，由于 user 对象在更新时引用的仍然是同一个对象，因此它被认为是没有变化的。这意味着 useEffect 钩子的函数体不会被调用。

我们可以通过创建一个新的对象来解决这个问题：

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

useEffect(() => {
  console.log(user.name);
}, [{ ...user }]);

由于我们使用了一个新的对象，React 会认为它是一个新的依赖，并调用 useEffect 钩子的函数体。

3. 多个状态改变复合成一个状态更新

const [count, setCount] = useState(0);
const [text, setText] = useState("");

useEffect(() => {
  console.log(count, text);
}, [count]);

在上面的例子中，useEffect 钩子的函数体只会在 count 改变时被调用。如果我们改变了 text 的值，它将会被忽略。

我们可以通过创建一个新的对象，将多个状态合并成一个状态来解决这个问题：

const [state, setState] = useState({ count: 0, text: "" });

const { count, text } = state;

useEffect(() => {
  console.log(count, text);
}, [state]);

这里，我们将多个状态合并成了一个状态对象 state，并将其传递给了 useEffect 钩子的依赖数组。当 count 或 text 改变时，state 对象的引用也会随之改变，从而触发 useEffect 钩子的函数体。

以上就是一些常见的原因和方法，来解决钩子状态数组更新后未触发 useEffect 的问题。希望这篇文章能够对你有所帮助。