时间戳

首页 > 解决方案 > 如何使用状态变量而不在循环内的不同组件之间共享

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

问题描述

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

这是代码：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>
    );
  }

标签： javascriptreactjs

解决方案

你可以做这样的事情。您需要更改将评论存储到对象的状态。

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

推荐阅读