Javascript 如何在for循环中禁用正确的按钮

我有一个1-8行（有自己的按钮），我想正确地禁用每个按钮时，用户。现在，它只是在单击任何按钮时禁用最后一个按钮。知道我做错了什么吗？当按钮是for循环时，如何正确禁用该按钮

class ResolveSourceContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
        modalOpen: false,
        updated: [],
        key: 0,
    };
}

disableRow = (key) => {
    let {updated} = this.state
    updated.push(key)
    this.setState({updated})
}

render() {

    const { size, modalOpen} = this.state;
    let {key} = this.state
    const { element} = this.props;

    return (
        <div>
            <Modal size={size} open={modalOpen} onClose={this.closeModal}>
                <Modal.Content style={{textAlign: 'center'}}>
                    <div className='ird-modal'>
                        <Modal.Header>
                            {`${element.lid}`}
                        </Modal.Header>
                    </div>
                    <Table>
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell>Type</Table.HeaderCell>
                    <Table.HeaderCell>Update</Table.HeaderCell>
                        </Table.Row>
                        {Object.keys(element.auditdiff).map(function(dataType){
                            if (dataType !== "Lid" && dataType !== "Datacenter" && dataType !=="Id") 
                            return (
                                Object.keys(element.auditdiff[dataType]).map(function(data){
                                    {key++}
                                    return (
                                        <Table.Row key = {i}>
                                            <Table.Cell>{data + " " + dataType}</Table.Cell>
                                            <Table.Cell>
                                            <Button content='Update Row' color='green' disabled = {updated.indexOf(key) >-1} //not correctly disabling the button
                                                onClick = {() =>  {this.disableRow(key)} } 
                                                />
                                            </Table.Cell>
                                        </Table.Row>
                                        );
                                    })
                            )})
                        }

                        </Table.Header>
                </Table>
                </Modal.Content>
            </Modal>
        </div>
    )
}
}

类ResolveSourceContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
莫达洛彭：错，
更新：[]，
关键字：0，
};
}
disableRow=（键）=>{
让{updated}=this.state
更新。按（键）
this.setState（{updated}）
}
render（）{
const{size，modalOpen}=this.state；
设{key}=this.state
const{element}=this.props；
返回(
{`${element.lid}`}
类型
使现代化
{Object.keys（element.auditdiff）.map（函数（数据类型）{
if（数据类型！==“Lid”&&dataType！==“数据中心”&&dataType！==“Id”）
返回(
Object.keys（element.auditdiff[dataType]）.map（函数（数据）{
{key++}
返回(
{data+“”+dataType}
-1} //未正确禁用按钮
onClick={（）=>{this.disableRow（key）}
/>
);
})
)})
}
)
}
}

首先，您需要使用concat来设置状态，而不是push。concat将返回一个新数组，但push只是将新项添加到原始数组中

其次，通过{key++}直接修改键状态。实际上，您不需要键状态，您可以使用映射中的索引功能

类ResolveSourceContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
莫达洛彭：错，
更新：[]，
关键字：0，
};
}
disableRow=（键）=>{
让{updated}=this.state
this.setState（{updated:updated.concat（[key]）}）
}
render（）{
const{size，modalOpen}=this.state；
设{key}=this.state
const{element}=this.props；
返回(
{`${element.lid}`}
类型
使现代化
{Object.keys（element.auditdiff）.map（函数（数据类型）{
if（数据类型！==“Lid”&&dataType！==“数据中心”&&dataType！==“Id”）
返回(
Object.keys（element.auditdiff[dataType]）.map（函数（数据、索引）{
返回(
{data+“”+dataType}
-1} //未正确禁用按钮
onClick={（）=>{this.disableRow（index）}
/>
);
})
)})
}
)
}
}

问题#1：您正在变异状态对象！ 问题：将新值推送到现有数组中并存储回状态

disableRow = (key) => {
  let {updated} = this.state
  updated.push(key) // <--- mutating current array reference
  this.setState({updated})
}

问题#2：您没有使用一致的键来标识行，它们会更新每个渲染周期。 解决方案：为数据集中唯一的每个数据元素使用键，如id、名称等。。相同元素的键应在重新渲染期间保持不变

disableRow = (key) => {
  this.setState(prevState => ({
    updated: [...prevState.updated, key],
  }));
}