时间戳

首页 > 解决方案 > Reactjs映射函数如何为数组中的每个项目显示不同的值

javascript - Reactjs映射函数如何为数组中的每个项目显示不同的值

问题描述

我正在尝试使用 map 函数来显示数组中的每个项目，并且还有一个使用 Material UI 的星级评分系统，用户可以在其中单击其中一颗星。但是，当用户单击特定项目的评分时，数组中的所有其他项目也会更改为该值 - 如果有意义的话，我希望每个项目都是唯一的。这是代码（我在反应中使用类组件）。

<List>
  {this.state.quizzes.map((item) => {
    return (
      <ListItem button key={`${this.topic}-${item.quiz_title}`}>
        <div className="rating" onClick={(e) => e.stopPropagation()}>
          <Rating
            name="hover-feedback"
            value={this.state.value}
            precision={1}
            max={3}
            onChange={(e, newValue) => {
              this.setValue(newValue)
            }}
            onChangeActive={(e, newHover) => {
              this.setHover(newHover)
            }}
          />
          {this.state.value !== null && (
            <Box ml={2}>
              {
                this.labels[
                  this.state.hover !== -1 ? this.state.hover : this.state.value
                ]
              }
            </Box>
          )}
        </div>
      </ListItem>
    )
  })}
</List>

我怎样才能做到这一点，以便用户选择的值也不会改变其他项目的值？数组中会有很多项目，所以我不想为每个项目创建一个变量。提前致谢 ：）

标签： javascriptreactjsmaterial-ui

解决方案

你可以这样做。

 return (
      {this.state.quizzes.map((item) => (
        <List>
          <ListItem button key={`${this.topic}-${item.quiz_title}`}>
                  <div className="rating" onClick={(e) => e.stopPropagation()}>
                    <Rating
                      name="hover-feedback"
                      value={this.state.value}
                      precision={1}
                      max={3}
                      onChange={(e, newValue) => {
                        this.setValue(newValue)
                      }}
                      onChangeActive={(e, newHover) => {
                        this.setHover(newHover)
                      }}
                    />
                    {this.state.value !== null && (
                      <Box ml={2}>
                        {
                          this.labels[
                            this.state.hover !== -1 ? this.state.hover : this.state.value
                          ]
                        }
                      </Box>
                    )}
                  </div>
                </ListItem>
        </List>

      ))}

)

推荐阅读