ReactJS中onChange触发时已生成的随机ID持续变动如何解决

• 组件触发onChange后状态更新引发重渲染，此时createArray函数会被重新执行，内部makeid(5)生成新的随机ID，导致已有ID全量变更
• 之前使用useMemo未生效，通常是依赖项配置错误：比如将onChange关联的可变状态加入了依赖项，导致每次状态更新都触发useMemo重新计算生成新数组
• 额外逻辑漏洞：createArray函数中仅在循环外创建了一次object对象，后续循环push的都是同一个对象引用，修改任意一项属性会同步影响所有数组项

1. 修正createArray实现 #

将对象创建逻辑移入循环内部，保证每个数组项都是独立对象，避免引用共用问题：

const createArray = (x) => {
  let array = [];
  for (let i = 1; i <= x; i++) {
    const object = {
      id: makeid(5),
    };
    array.push(object);
  }
  return array;
};

2. 用useState持久化存储生成后的ID数组 #

ID一旦生成无需变更，将最终列数组存入state，仅在必要时重新生成：

import { useState, useEffect } from 'react';

// 组件内部
const [columns, setColumns] = useState([]);

// 仅当studentObject变化时才重新生成列数组
useEffect(() => {
  const tempArr = [];
  [...studentObject, ...createArray(5 - studentObject.length)].forEach((ele) => {
    tempArr.push({
      id: ele.id,
    });
  });
  setColumns(tempArr);
}, [studentObject]);

之后直接使用columns.map渲染标签即可，onChange触发的状态更新不会影响columns的取值。

3. useMemo正确用法（无需修改列数组时可选） #

如果不需要后续修改列数组，也可以用useMemo缓存结果，仅将studentObject设为依赖项：

import { useMemo } from 'react';

const columns = useMemo(() => {
  return [...studentObject, ...createArray(5 - studentObject.length)].map(ele => ({
    id: ele.id
  }));
}, [studentObject]);

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