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

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>

   )}

   ...

   );

}