Javascript 使用映射函数为动态渲染的组件指定状态

我有一个包含播放器的表，它是通过API调用加载的，并使用map函数呈现。表的最后一列包含删除按钮。单击delete按钮时，我想禁用所有其他delete按钮，直到delete调用完成

下面是执行API调用以获取播放器的函数

    loadPlayers() {
        const { cookies } = this.props;
        const AuthStr = 'Bearer '.concat(this.state.access_token);

        axios.get(
            configVars.apiUrl + 'team/get-team',
            { headers: { Authorization: AuthStr } }
        ).then(response => {
            var teamArray = response.data;

            //Information gotten
            this.setState({
                teamArray: teamArray,
            });

        }).catch((error) => {
            //Error, remove the access token from cookies and redirect home.
            cookies.remove('access_token');
            this.props.history.push("/");

        });
    }
}

映射和渲染如下所示：

<Grid item xs={12}>
    <Table size="small">
        <TableHead>
            <TableRow>
            <TableCell>Name</TableCell>
            <TableCell align="right">Tier</TableCell>
            <TableCell align="right">Value</TableCell>
            <TableCell align="right">Delete</TableCell>
            </TableRow>
        </TableHead>
        {this.state.teamArray.map((player, i) => {
            return <TableBody key={i}>
                <TableRow key={i}>
                    <TableCell align="left">{player.full_name}</TableCell>
                    <TableCell align="right">{player.tier}</TableCell>
                    <TableCell align="right">{player.value}</TableCell>
                    <TableCell align="right">
                        <IconButton disabled={this.state.deleteDisable}
                            onClick={() => {this.handleDelete(player.id)}} >
                            <DeleteIcon />
                        </IconButton>
                    </TableCell>
                </TableRow>
            </TableBody>;
        })}
    </Table>
</Grid>

名称
层
价值
删除
{this.state.teamArray.map（（player，i）=>{
返回
{玩家全名}
{player.tier}
{player.value}
{this.handledelite（player.id）}>
;
})}

在

handleDelete

函数中，我首先将

deleteDisabled

的状态设置为true。但是，这不起作用，因为一旦加载了表，disabled就被设置为false，并且之后再也不会更改

---

如何确保

此.state.deleteDisable

作为变量传递给按钮，而不是一次赋值？

您应该将播放器存储到

状态

，然后在

渲染

方法中，您可以显示

表

function loadPlayer() {
    const { cookies } = this.props;
    const AuthStr = 'Bearer '.concat(this.state.access_token);

    axios.get(
        configVars.apiUrl + 'team/get-team',
        { headers: { Authorization: AuthStr } }
    )
    .then(response => this.setState({players: response.data})})
    .catch((error) => {
        // Error ....
    });
}

render() {
   return (
   ...
   {
     this.state.players((player, i) => (
     <TableBody key={i}>
       <TableRow>
         <TableCell align="left">{player.full_name}</TableCell>
         <TableCell align="right">{player.tier}</TableCell>
         <TableCell align="right">{player.value}</TableCell>
         <TableCell align="right">
           <IconButton disabled={this.state.deleteDisabled}
                       onClick={() => {this.handleDelete(player.id)}} >
             <DeleteIcon />
           </IconButton>
         </TableCell>
       </TableRow>
     </TableBody>
   )}
   ...
   );
}

函数loadPlayer（）{
const{cookies}=this.props；
const AuthStr='Bearer'.concat（this.state.access_令牌）；
axios.get(
configVars.apiUrl+“团队/获取团队”，
{头：{授权：AuthStr}}
)
.then（response=>this.setState（{players:response.data}）}）
.catch（（错误）=>{
//错误。。。。
});
}
render（）{
返回(
...
{
this.state.players（（player，i）=>(
{玩家全名}
{player.tier}
{player.value}
{this.handledelite（player.id）}>
)}
...
);
}

您应该将播放器存储到

状态

，然后在

渲染

方法中，您可以显示

表

function loadPlayer() {
    const { cookies } = this.props;
    const AuthStr = 'Bearer '.concat(this.state.access_token);

    axios.get(
        configVars.apiUrl + 'team/get-team',
        { headers: { Authorization: AuthStr } }
    )
    .then(response => this.setState({players: response.data})})
    .catch((error) => {
        // Error ....
    });
}

render() {
   return (
   ...
   {
     this.state.players((player, i) => (
     <TableBody key={i}>
       <TableRow>
         <TableCell align="left">{player.full_name}</TableCell>
         <TableCell align="right">{player.tier}</TableCell>
         <TableCell align="right">{player.value}</TableCell>
         <TableCell align="right">
           <IconButton disabled={this.state.deleteDisabled}
                       onClick={() => {this.handleDelete(player.id)}} >
             <DeleteIcon />
           </IconButton>
         </TableCell>
       </TableRow>
     </TableBody>
   )}
   ...
   );
}

函数loadPlayer（）{
const{cookies}=this.props；
const AuthStr='Bearer'.concat（this.state.access_令牌）；
axios.get(
configVars.apiUrl+“团队/获取团队”，
{头：{授权：AuthStr}}
)
.then（response=>this.setState（{players:response.data}）}）
.catch（（错误）=>{
//错误。。。。
});
}
render（）{
返回(
...
{
this.state.players（（player，i）=>(
{玩家全名}
{player.tier}
{player.value}
{this.handledelite（player.id）}>
)}
...
);
}

您应该将响应结果存储到状态中，而不是响应元素数组感谢您的响应，我更新了我的问题，我同意代码以这种方式看起来更有条理。不幸的是，当单击其中一个按钮时，它仍然不会改变按钮的状态。您应该将响应结果存储到状态中，而不是存储到状态中react元素列表感谢您的回复，我更新了我的问题，我同意代码以这种方式看起来更有条理。不幸的是，当单击其中一个按钮时，它仍然不会改变按钮的状态。效果很好，非常感谢！代码以这种方式看起来也更干净。效果很好，非常感谢！代码以这种方式看起来也更干净.