Question

我有一张桌子，上面有播放器，这些播放器是通过API调用加载的，并使用地图函数进行渲染。该表的最后一列包含一个删除按钮。单击删除按钮时，我想禁用所有其他删除按钮，直到删除调用完成。

这是执行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>

在handleDelete函数内部，我首先将deleteDisabled的状态设置为true。但是，这没有效果，因为一旦表被加载，disabled设置为false，之后便再也不会更改。

如何确保将this.state.deleteDisable作为变量而不是一次分配给按钮？

Answer 1

您应该将玩家存储在state中，然后在render方法中显示table

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>
   )}
   ...
   );
}

使用地图功能将状态分配给动态渲染的组件

1 个答案: