我在循環(huán)中有兩張卡片組件，如下面的代碼所示。在卡片中，我有一個文本字段和一個添加按鈕。單擊添加按鈕后，在文本字段中輸入的值將填充在卡片內(nèi)。但是當(dāng)我這樣做時，另一張卡也顯示相同的值。這意味著，假設(shè)我在第一張卡片的文本字段中輸入了一個值，那么第二張卡片中也會顯示相同的值。我知道這是因為我在循環(huán)內(nèi)使用相同的狀態(tài)變量，并且在循環(huán)內(nèi)的其他卡組件之間共享。我無法找到解決方案，因此如果我在卡片組件的文本字段中輸入某些內(nèi)容，則它不會反映在循環(huán)內(nèi)的其他組件上。代碼，我在循環(huán)中渲染卡片組件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>    );  }