如何使用状态变量而不在循环内的不同组件之间共享

Question

我在循环中有两张卡片组件，如下面的代码所示。在卡片中，我有一个文本字段和一个添加按钮。单击添加按钮后，在文本字段中输入的值将填充在卡片内。但是当我这样做时，另一张卡也显示相同的值。这意味着，假设我在第一张卡片的文本字段中输入了一个值，那么第二张卡片中也会显示相同的值。我知道这是因为我在循环内使用相同的状态变量，并且在循环内的其他卡组件之间共享。我无法找到解决方案，因此如果我在卡片组件的文本字段中输入某些内容，则它不会反映在循环内的其他组件上。

代码，我在循环中渲染卡片组件

render() {

    const { classes } = this.props;

    let apidata = this.state.apidata;

    return (

      <div>

        <br />

        <br />

        <div className={classes.root}>

        <GridList cellHeight={600} cols={2} className={classes.gridList}> 

            {apidata.map((val,index) => (                             

              <GridListTile className="gridtile" key={val.id}>

                <Card className={classes.card} key={val.id} >

                  <CardHeader

                    title={val.username}                    

                  />

                    <Typography className={classes.test}>

                     <span>{this.state.img_comments}</span>

                    </Typography>

                    <TextField

                      label="Add a comment"

                      className={classes.textField}

                      margin="normal"

                      onChange={(e)=>this.commentHandler(e,index)}

                      defaultValue=""

                    />

                    <Button

                      variant="contained"

                      color="primary"

                      className={classes.button}

                      onClick={this.putComment}

                    >

                      ADD

                    </Button>

                </Card>

              </GridListTile>

            ))}

            </GridList>

        </div>

      </div>

    );

  }