React useState实现：添加元素时保留已有元素随机位置不变

核心问题在于每次组件重新渲染时，所有元素的位置都会重新调用randomNum生成新值，而添加新元素会触发组件重新渲染，导致原有元素位置也跟着变化。解决方法是把每个元素的随机位置和数据绑定，一次性生成后不再改变。

步骤1：修改数据结构，新增位置字段 #

让每个姓名元素包含top和right位置信息，这样位置会和数据一起被持久化存储。

步骤2：添加新元素时生成随机位置 #

在add函数中，新增元素的同时就生成对应的随机位置，而不是渲染时临时生成。

修改后的代码示例 #

随机数生成函数（不变）

const randomNum = (min: number, max: number): number => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

更新添加函数

function add(id: number) {
  setData(
    update(data, {
      data: {
        $push: [
          {
            name: '',
            id,
            // 添加新元素时直接生成随机位置
            top: `${randomNum(0, 51)}%`,
            right: `${randomNum(0, 51)}%`,
          },
        ] as any,
      },
    })
  );
}

渲染元素时直接使用存储的位置

const elements = data.data.map((el) => {
  return (
      <div
        style={{
          position: 'absolute',
          // 直接读取数据中保存的位置，不再重新生成
          top: el.top,
          right: el.right,
        }}
      >
        {el.name}
      </div>
  );
});

初始化数据的补充 #

如果有初始姓名数据，初始化时也要给每个元素添加上随机位置：

const [data, setData] = useState({
  data: [
    { 
      name: '初始姓名1', 
      id: 1, 
      top: `${randomNum(0,51)}%`, 
      right: `${randomNum(0,51)}%` 
    },
    // 其他初始元素
  ]
});

这样修改后，只有新增的元素会生成新的随机位置，原有元素的位置会从状态中读取，不会随组件重新渲染而改变。

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