React：如何获知useState数组状态中已更新的元素及其索引？

当然可行，React的useState本身不会直接提供更新元素的索引，但可以通过两种常用方法实现需求：

方法一：用useRef保存旧状态，对比新旧数组找出差异索引 #

通过useRef存储上一次的数组状态，在useEffect里对比当前状态和旧状态，就能定位到更新的元素索引。

基础类型数组示例 #

import { useState, useEffect, useRef } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 3]);
  const prevItemsRef = useRef(items);

  useEffect(() => {
    const prevItems = prevItemsRef.current;
    // 遍历数组找出值不同的索引
    const updatedIndices = items.reduce((acc, currentItem, index) => {
      if (currentItem !== prevItems[index]) {
        acc.push(index);
      }
      return acc;
    }, []);

    if (updatedIndices.length) {
      console.log('更新的元素索引:', updatedIndices);
      // 在这里执行你的业务逻辑
    }

    // 更新ref，保存当前状态作为下一次对比的旧状态
    prevItemsRef.current = items;
  }, [items]);

  // 测试：随机更新第二个元素
  const updateSecondItem = () => {
    setItems(prev => {
      const newArr = [...prev];
      newArr[1] = Math.floor(Math.random() * 100);
      return newArr;
    });
  };

  return (
    <div>
      <button onClick={updateSecondItem}>更新第二个元素</button>
      <ul>
        {items.map((item, idx) => <li key={idx}>{item}</li>)}
      </ul>
    </div>
  );
}

export default App;

引用类型数组（如对象）注意事项 #

如果数组元素是对象这类引用类型，浅对比会失效，需要用深对比判断元素是否变化。可以自己实现深比较逻辑，或者使用成熟工具函数（比如lodash的isEqual）：

// 以lodash.isEqual为例
import { isEqual } from 'lodash';

// 在useEffect的对比逻辑中替换为：
const updatedIndices = items.reduce((acc, currentItem, index) => {
  if (!isEqual(currentItem, prevItems[index])) {
    acc.push(index);
  }
  return acc;
}, []);

方法二：自定义更新函数，主动记录更新索引 #

如果是你主动触发数组元素更新（比如点击按钮修改），可以封装一个自定义更新函数，在修改状态的同时直接记录更新的索引，后续在useEffect中使用这个索引。

import { useState, useEffect, useRef } from 'react';

function App() {
  const [items, setItems] = useState([{ id: 1, val: 10 }, { id: 2, val: 20 }]);
  const lastUpdatedIndexRef = useRef(null);

  // 自定义更新函数，同时记录索引
  const updateItem = (index, newVal) => {
    setItems(prev => {
      const newArr = [...prev];
      newArr[index] = { ...newArr[index], val: newVal };
      return newArr;
    });
    // 记录当前更新的索引
    lastUpdatedIndexRef.current = index;
  };

  useEffect(() => {
    if (lastUpdatedIndexRef.current !== null) {
      console.log('最新更新的元素索引:', lastUpdatedIndexRef.current);
      // 执行你的业务逻辑
      // 可选：执行后重置ref，避免重复触发
      // lastUpdatedIndexRef.current = null;
    }
  }, [items]);

  return (
    <div>
      <button onClick={() => updateItem(1, Math.floor(Math.random() * 100))}>更新第二个元素</button>
      <ul>
        {items.map(item => <li key={item.id}>{item.val}</li>)}
      </ul>
    </div>
  );
}

export default App;

总结 #

• 方法一适合无法提前预知更新来源的场景，通过对比新旧状态找出所有变化的索引；
• 方法二更适合主动触发更新的场景，直接记录索引，性能开销更低。

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