useEffect 无法更改数组 - Javascript

在 React 中，使用 useEffect 钩子函数可以处理副作用，例如发送 API 请求、订阅事件和更新组件状态等。然而，它有一个限制，就是它不能直接更改传入的数组。

问题背景

在使用 useEffect 时，我们可以传入一个数组作为第二个参数，来指定触发副作用的依赖项。当依赖项的值发生改变时，useEffect 函数会重新执行。

useEffect(callback, [dependency1, dependency2, ...]);

然而，如果我们尝试在副作用内部直接修改传入的依赖项数组，React 会抛出警告。这是因为 React 使用该数组的引用来比较依赖项是否发生了变化，以决定是否重新执行副作用。如果直接修改了数组，其引用不会改变，React 无法判断依赖项是否发生了变化，可能导致副作用无法正确触发。

解决方法

为了避免直接修改传入的依赖项数组，可以采用以下两种解决方法：

方法一：创建一个新的数组

可以通过在副作用内部创建一个新的数组，再修改其元素来解决此问题。这样，虽然数组的引用不会改变，但是元素的值会发生改变，从而触发依赖项数组的变化。

useEffect(() => {
  const modifiedDependency = [...dependency]; // 创建一个新的数组
  modifiedDependency.push('new value'); // 修改新数组的元素
  // 执行其他副作用操作
}, [dependency]);

方法二：使用函数式更新

React 提供了一种函数式更新的方式来修改状态值，可以结合这种方式来间接修改传入的依赖项数组。

const [dependency, setDependency] = useState([]);

useEffect(() => {
  setDependency(prevDependency => {
    const modifiedDependency = [...prevDependency]; // 创建一个新的数组
    modifiedDependency.push('new value'); // 修改新数组的元素
    return modifiedDependency; // 返回新的数组作为状态更新值
  });
}, []);

通过函数式更新，确保对依赖项数组进行修改操作时，始终使用先前的状态值，从而避免直接更改传入的数组。

注意事项

• 避免直接修改传入的依赖项数组，而应该创建一个新的数组或使用函数式更新来间接修改。
• 使用函数式更新时，确保返回新的数组作为状态更新值。

以上是关于如何处理无法更改数组的问题的解决方法。通过遵循这些方法，可以确保正确地处理副作用，避免可能的错误和警告。

请注意，此解决方案适用于 React 版本 16.8 及更高版本中使用的函数式组件和 useEffect 钩子函数。