React中useState用常量对象导致动态输入框同步更新问题

问题根源 #

你遇到的所有输入框同步更新的问题，核心原因是所有动态添加的项共享了同一个对象引用：

• NEW_TAX_LINE是一个固定的对象常量，每次添加新项时，你直接将这个对象的引用推入数组，导致所有新增条目指向内存中同一个对象。
• 当修改任意一个条目的属性时，所有引用该对象的输入框都会同步变化。

修复步骤 #

1. 初始化State时使用对象副本

将初始State的创建方式从直接引用常量，改为创建常量对象的独立副本：

const [taxLineItems, setTaxLineItems] = useState([{...NEW_TAX_LINE}]);

2. 添加新项时创建新的对象副本

修改handleAddNewTax函数，每次添加新条目时都通过扩展运算符生成新对象：

function handleAddNewTax(){
    setTaxLineItems( [...taxLineItems, {...NEW_TAX_LINE}] )
}

3. 优化状态更新的不可变性（推荐）

为了更严格遵循React的状态不可变原则，可以将handleChangeTaxItems改为函数式更新，确保每次修改都创建新对象：

const handleChangeTaxItems = (event, index, PROPKEY) => {
    setTaxLineItems(prevItems => 
        prevItems.map((item, i) => 
            i === index ? {...item, [PROPKEY]: event.target.value} : item
        )
    );
}

修复原理 #

扩展运算符{...NEW_TAX_LINE}会创建一个全新的对象，它拥有原常量对象的所有属性，但存储在独立的内存地址中。这样每个条目都是独立的对象实例，修改其中一个不会影响其他条目。

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