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

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方法中您可以显示tablefunction loadPlayer() {&nbsp; &nbsp; const { cookies } = this.props;&nbsp; &nbsp; const AuthStr = 'Bearer '.concat(this.state.access_token);&nbsp; &nbsp; axios.get(&nbsp; &nbsp; &nbsp; &nbsp; configVars.apiUrl + 'team/get-team',&nbsp; &nbsp; &nbsp; &nbsp; { headers: { Authorization: AuthStr } }&nbsp; &nbsp; )&nbsp; &nbsp; .then(response => this.setState({players: response.data})})&nbsp; &nbsp; .catch((error) => {&nbsp; &nbsp; &nbsp; &nbsp; // Error ....&nbsp; &nbsp; });}render() {&nbsp; &nbsp;return (&nbsp; &nbsp;...&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp;this.state.players((player, i) => (&nbsp; &nbsp; &nbsp;<TableBody key={i}>&nbsp; &nbsp; &nbsp; &nbsp;<TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<TableCell align="left">{player.full_name}</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<TableCell align="right">{player.tier}</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<TableCell align="right">{player.value}</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<TableCell align="right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<IconButton disabled={this.state.deleteDisabled}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onClick={() => {this.handleDelete(player.id)}} >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<DeleteIcon />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</IconButton>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</TableCell>&nbsp; &nbsp; &nbsp; &nbsp;</TableRow>&nbsp; &nbsp; &nbsp;</TableBody>&nbsp; &nbsp;)}&nbsp; &nbsp;...&nbsp; &nbsp;);}