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

Question

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

以下是代码：CodeSandbox

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

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

Answer 1

您可以执行以下操作。您需要更改将注释存储为对象的状态。

this.state = {
  date: "",
  apidata: [],
  favColor: 0,
  commentFlag: 0,
  count: 0,
  id: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  comments: [],
  img_comments: {},
  hdn_img_comments: []
};

putComment函数的更改

putComment = (key) => {
// e.preventDefault();
let obj = this.state.img_comments;
obj[key] = this.state.hdn_img_comments;

this.setState({ img_comments: obj });

 };

添加按钮中的一些细微变化

<Button
    variant="contained"
    color="primary"
    className={classes.button}
    onClick={() => this.putComment(val.id)}
    >
     ADD
</Button>

以下是代码链接：Sandbox

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

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

1 个答案: