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

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