React中input number onChange时useEffect数组更新失效问题排查

通过number类型input指定需渲染的组件数量，定义了Quantity（控制数量）和Arr（存储带id的组件对象）两个状态，但现有代码存在以下问题：

• 点击input增减按钮时，Arr无法正确添加或删除对应Item
• 未正确整合localStorage持久化功能

原代码如下：

const [Quantity, setQuantity] = useState('0')
const [Arr, setArr] = useState([])

useEffect(() => {
  [...Array(parseInt(Quantity))].map((_, i) => {
    setArr((prev) => {
      const Item = { id: i };
      localStorage.setItem("LSKey", JSON.stringify([...prev, Item]))
      return [...prev, Item];
    });
  });
}, [])

<input type="number" value={Quantity || ""} min={0} onChange={(event) => {
    setQuantity(event.target.value)
}} />

渲染组件

Arr.map((Item) => (
  <Components key={Item.id} id={Item.id} />
))

问题分析 #

1. useEffect依赖缺失：依赖数组为空，仅在组件首次挂载时执行，后续Quantity变化无法触发Arr更新
2. 状态更新逻辑错误：循环调用setArr导致状态多次累积更新，且完全未处理数量减少时的删除逻辑
3. localStorage同步时机错误：每次setArr都写入localStorage，会导致存储内容与最终Arr状态不一致
4. 类型不一致：Quantity初始值为字符串'0'，后续处理易出现类型问题

修正后代码 #

import { useState, useEffect } from 'react';

const YourComponent = () => {
  // 初始化时从localStorage读取数据，无保存数据则默认数量0、Arr为空
  const [Quantity, setQuantity] = useState(() => {
    const saved = localStorage.getItem("LSKey");
    return saved ? JSON.parse(saved).length.toString() : '0';
  });
  const [Arr, setArr] = useState(() => {
    const saved = localStorage.getItem("LSKey");
    return saved ? JSON.parse(saved) : [];
  });

  // 监听Quantity变化，根据数量差异更新Arr
  useEffect(() => {
    const targetCount = parseInt(Quantity) || 0;
    const currentCount = Arr.length;

    if (targetCount > currentCount) {
      // 新增元素：生成不重复的id（基于当前最大id递增）
      const maxId = Arr.length > 0 ? Math.max(...Arr.map(item => item.id)) : -1;
      const newItems = Array.from({ length: targetCount - currentCount }, (_, index) => ({
        id: maxId + 1 + index
      }));
      setArr(prev => [...prev, ...newItems]);
    } else if (targetCount < currentCount) {
      // 删除元素：保留前targetCount个项
      setArr(prev => prev.slice(0, targetCount));
    }
  }, [Quantity, Arr.length]);

  // 监听Arr变化，同步到localStorage
  useEffect(() => {
    localStorage.setItem("LSKey", JSON.stringify(Arr));
  }, [Arr]);

  return (
    <>
      <input 
        type="number" 
        value={Quantity} 
        min={0} 
        onChange={(event) => {
          // 处理空输入，保证Quantity始终为合法数字字符串
          const value = event.target.value;
          setQuantity(value === '' ? '0' : value);
        }} 
      />
      {Arr.map((Item) => (
        <Components key={Item.id} id={Item.id} />
      ))}
    </>
  );
};

关键改进点 #

• 初始化逻辑：从localStorage读取保存的Arr数据，同步设置初始Quantity为Arr长度，保证初始状态一致
• Quantity监听：根据目标数量与当前Arr长度的差异，分别处理新增/删除逻辑，新增时生成不重复id避免冲突
• localStorage同步：单独用useEffect监听Arr变化，仅在Arr稳定更新后写入localStorage，保证数据一致性
• 输入处理：修正input的onChange逻辑，避免空值导致的状态异常

内容的提问来源于stack exchange，提问作者s.kuznetsov