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

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;

clickedRunButton[pipeName] 中使用的pipeName 未定义。这将导致问题。

您可以将变量分配给对象中的索引，如下所示：

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

希望对你有帮助