React中使用useState更新多版税账户对象的逻辑求助

我有一个FormApp组件，其中renderRoyaltyAccounts函数会根据royaltyAccount的输入值渲染对应次数的版税账户输入模块，每个模块包含账户名称和百分比两个输入字段。我希望根据创建的账户数量，生成以序号为键、包含account和percentage字段的对象结构（示例如下）：

{
    1: {
      "account": "test1",
      "percentage": 2,
    },
    2: {
      "account": "test@",
      "percentage": 0.5
    }
}

我尝试使用useState结合输入框的onChange事件更新状态，但过程混乱，希望梳理该状态的处理逻辑，尤其是对象与Hooks的使用方法。附带代码如下：

export default function FormApp() {

    const [royaltyAccount, setRoyaltyAccount] = useState(1);

    const [allAccounts, setAllAccounts] = useState ({
            
                {
                    "account": "",
                    "percentage": 1,
                },
            
        })

    const renderRoyaltyAccounts = () => {
        let items = [];
        for (let i = 0; i < royaltyAccount; i++) {

            items.push(
                <div key={i}>
                    <div>
                        <label>Royalty Account n° {i + 1}</label>
                        <input onChange={()=> setAllAccounts(???)} type="text"/>
                    </div>
                    <div>
                        <label>Royalty %</label>
                        <input onChange={()=> setAllAccounts(???)} type="text"/>
                    </div>
                </div>
            )
        }
        return items;
    }


return (

  <>
    <label> Royalty account(s)</label>
    <input onChange={(e) => { setRoyaltyAccount(e.target.value)}} type="number"/>
    {
      renderRoyaltyAccounts()
     }

  </>

)


}

1. 修正初始状态结构 #

原代码中allAccounts的初始状态写法错误，对象不能直接嵌套未命名的对象字面量，应改为以序号为键的合法结构：

const [allAccounts, setAllAccounts] = useState({
    1: {
        account: "",
        percentage: 1,
    }
});

2. 同步账户数量与状态 #

当用户修改账户数量时，需要自动调整allAccounts的条目数：

• 数量增加时，补充新的空账户条目
• 数量减少时，删除超出部分的账户条目
  通过useEffect监听royaltyAccount的变化实现同步：

useEffect(() => {
    const count = Number(royaltyAccount);
    const currentKeys = Object.keys(allAccounts).map(Number);
    
    if (count > currentKeys.length) {
        const newAccounts = {...allAccounts};
        for (let i = currentKeys.length + 1; i <= count; i++) {
            newAccounts[i] = { account: "", percentage: 1 };
        }
        setAllAccounts(newAccounts);
    } else if (count < currentKeys.length) {
        const newAccounts = {...allAccounts};
        for (let i = count + 1; i <= currentKeys.length; i++) {
            delete newAccounts[i];
        }
        setAllAccounts(newAccounts);
    }
}, [royaltyAccount]);

3. 编写通用输入处理函数 #

为每个输入框绑定处理函数，传入当前序号和字段类型，通过不可变更新的方式修改状态，避免直接修改原对象：

const handleAccountChange = (index, field, value) => {
    setAllAccounts(prev => ({
        ...prev,
        [index]: {
            ...prev[index],
            [field]: field === 'percentage' ? Number(value) : value
        }
    }));
};

完整修正代码 #

import { useState, useEffect } from 'react';

export default function FormApp() {
    const [royaltyAccount, setRoyaltyAccount] = useState(1);
    const [allAccounts, setAllAccounts] = useState({
        1: {
            account: "",
            percentage: 1,
        }
    });

    useEffect(() => {
        const count = Number(royaltyAccount);
        const currentKeys = Object.keys(allAccounts).map(Number);
        
        if (count > currentKeys.length) {
            const newAccounts = {...allAccounts};
            for (let i = currentKeys.length + 1; i <= count; i++) {
                newAccounts[i] = { account: "", percentage: 1 };
            }
            setAllAccounts(newAccounts);
        } else if (count < currentKeys.length) {
            const newAccounts = {...allAccounts};
            for (let i = count + 1; i <= currentKeys.length; i++) {
                delete newAccounts[i];
            }
            setAllAccounts(newAccounts);
        }
    }, [royaltyAccount]);

    const handleAccountChange = (index, field, value) => {
        setAllAccounts(prev => ({
            ...prev,
            [index]: {
                ...prev[index],
                [field]: field === 'percentage' ? Number(value) : value
            }
        }));
    };

    const renderRoyaltyAccounts = () => {
        let items = [];
        const count = Number(royaltyAccount);
        for (let i = 0; i < count; i++) {
            const index = i + 1;
            const accountData = allAccounts[index] || { account: "", percentage: 1 };
            
            items.push(
                <div key={index}>
                    <div>
                        <label>Royalty Account n° {index}</label>
                        <input 
                            type="text"
                            value={accountData.account}
                            onChange={(e) => handleAccountChange(index, 'account', e.target.value)}
                        />
                    </div>
                    <div>
                        <label>Royalty %</label>
                        <input 
                            type="number"
                            step="0.1"
                            value={accountData.percentage}
                            onChange={(e) => handleAccountChange(index, 'percentage', e.target.value)}
                        />
                    </div>
                </div>
            )
        }
        return items;
    }

    return (
        <>
            <label> Royalty account(s)</label>
            <input 
                type="number"
                min="1"
                value={royaltyAccount}
                onChange={(e) => setRoyaltyAccount(e.target.value)}
            />
            {renderRoyaltyAccounts()}
        </>
    )
}

核心逻辑说明 #

• 不可变更新：每次修改状态都复制原对象，再修改指定条目，符合React状态更新的不可变原则，避免意外重渲染。
• 类型转换：将百分比输入转为数字类型，保证数据类型统一。
• 自动同步：通过useEffect自动维护账户数量与状态条目的一致性，无需手动干预。

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