Question

我在页面上有大约10个相似的组件，但名称不同。每个组件均由for循环绘制，并具有一些按钮和数据。

如果我单击组件上的一个按钮，它将执行API调用，并且按钮将变为禁用状态，直到调用成功为止。

问题是，如果我单击另一个组件按钮上的另一个按钮，则该按钮将被禁用（这是预期的），但是随着setState的更改，它会启用以前单击的按钮（这是预期的）。我如何才能使按钮仅在其成功状态下启用。

这就是为什么我要在clickedRunButton状态下添加按钮名称，使其成为一个对象，但又如何在API调用期间在此对象中添加项目，并在调用成功期间将其删除。

与其添加另一个项目，不如将其覆盖。

    this.state = {
        clickedRunButton:{ pipeName :''}
    }

    onClickRun(params) {        
    const url = `/api/${params}/run`;
    let clickedRunButton = Object.assign({}, 
        this.state.clickedRunButton);    //creating copy of object
    return $.ajax({
        type: 'POST',
        url,
        processData: false,
        contentType: 'application/json',
        beforeSend :() =>{
            clickedRunButton.pipeName = params;  
            clickedRunButton[pipeName] = "run"+params;
            this.setState({
                clickedRunButton
            })
        },

        success: (response) => { 
            if(!response.error) {
                clickedRunButton.pipeName = params;  
                clickedRunButton[pipeName] = '';
                this.setState({
                clickedRunButton
               })
            }
        },

        error: (error) => {
        }
    });
}

Answer 1

看看：

clickedRunButton.pipeName = params;

和

clickedRunButton[pipeName] = "run"+params;

未定义pipeName中使用的

clickedRunButton[pipeName]。这会引起问题。

您可以像这样将变量分配给对象中的索引：

clickedRunButton[clickedRunButton.pipeName] = "run"+params

希望这会有所帮助

如何在对象中添加项目-React

1 个答案: