我正在处理动态添加的输入字段。输入字段有初始值，我已经设置为常量并相应地使用。
我所面临的问题是，无论我添加新的项目和类型，无论我t更新相同的值为所有的输入以及。我分享我的脚本，我正在尝试。
常量文件src/constant/index.js

.
.
export const NEW_TAX_LINE = {taxTitle:'',taxType:'percentage',taxRate:10};
.
.

组件文件'src/components/taxOptions.js

import { NEW_TAX_LINE } from "../../../../constants";
import { useState, useEffect, lazy } from "react";

const TaxItems = lazy(()=> import('./TaxItems'));

function TaxOptions() {

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

    const handleChangeTaxItems = (event, index, PROPKEY) => {
        console.log({event, index, PROPKEY});
        
        const _taxDetails = [...taxLineItems];
        _taxDetails[index][PROPKEY] = event.target.value;
        setTaxLineItems(_taxDetails);
    }

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

    return <>
        .
        .
        {taxLineItems.map((item, index) => (
            <TaxItems
                key={`tax-item-${index}`} 
                item={item}
                index={index}
                onChange={handleChangeTaxItems} 
            />
        ))}
        .
        .
        <Button 
            variant="contained"
            size="small"
            startIcon={<AddCircleOutlineIcon sx={{fontSize:'16px !important'}} />}
            className="add-tax-button"
            onClick={()=>handleAddNewTax()}
            >
            Add new
        </Button>
    </>
}

export default TaxOptions;

TaxItems.js

function TaxItems(props){

    return <>
    <TableRow >
            <TableCell className="tax-items" component="td" scope="row">
                <InputBase
                    className="i-item-cls"
                    // sx={{ flex: 1, mt:0}}
                    placeholder="Tax type"
                    inputProps={{ 'aria-label': 'unit-price' }}
                    name="unitprice"                     
                    fullWidth
                    value={props.item.taxTitle}
                    onChange={(event) => props.onChange(event, props.index, "taxTitle")}
                />
            </TableCell>
            <TableCell className="tax-items" align='right'>
                <Grid sx={{display: 'flex', alignItems: 'center'}}>
                    <InputBase
                        className="i-item-cls i-taxrate"
                        placeholder="Tax Rate"
                        inputProps={{ 'aria-label': 'Tax rate' }}
                        name="unitprice"                     
                        fullWidth
                        value={props.item.taxRate}
                        onChange={(event) => props.onChange(event, props.index, "taxRate")}
                    />
                    <Typography sx={{fontSize:'16px',fontWeight:'bold'}} component="span">%</Typography>
                </Grid>
            </TableCell>
        </TableRow>
    </>
}

export default TaxItems;

这里是截图或参考。

不知道我做错了什么。