分享
三行代码  ›  专栏  ›  技术社区  ›  Enbee

使用map函数为动态渲染组件分配状态 - Assign state to dynamically rendered component using map function

  •  0
  • Enbee  · 技术社区  · 1 周前

    我有一个表,其中包含从api调用加载并使用map函数呈现的播放器。表的最后一列包含一个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>
    

    在里面 handleDelete 功能一从设置开始 deleteDisabled 在真实的状态下。但是,这没有任何效果,因为一旦加载表,disabled就被设置为false,之后就不会更改。

    我如何确定 this.state.deleteDisable 作为变量传递给按钮,而不是分配一次?

    1 回复  |  直到 1 周前
        1
  •  1
  •   Olivier Boissé    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>
       )}
       ...
       );
    }