React 当前项始终是渲染组件列表中的第一项答案

【问题标题】：React current item is always the first item from the rendered component listReact 当前项始终是渲染组件列表中的第一项
【发布时间】：2020-05-08 19:37:56
【问题描述】：

我正在使用带有反应的材料 ui。以下是根据传递的数组输入呈现评级元素的组件。

class SkillSlider extends Component {

  constructor(props) {
    super(props)
    this.state = {
      skills: this.props.job.skill.map(skill => ({ name: skill.name, value: 1, hover: -1 }))
    }
  }

  render() {
    let { skills } = this.state;
    console.log("rendering..", skills)
    return (
      <div>
        {skills.map((item, i) => {
          console.log(">>>>", item.name)
          return (
            <div key={i} >

              <Box color={'white'} ml={2}>{item.name}</Box>
              <Rating
                name="hover-feedback"
                value={item.value}
                precision={0.5}
                onChange={(e, value) => { console.log("on change", item, value) }}
              />

            </div>
          );
        })}
      </div>
    );
  }
}

export default SkillSlider;

考虑到我在道具里面的工作技能是，

this.props.job.skill --> [{name:Java}, {name:React}, {name:AWS}]

上面的组件按预期呈现，但是当我点击评级时，在 on change 处理程序中，我总是得到第一个元素而不是当前元素。

例如在我的示例中，当我单击 AWS 时，日志显示 Java。

这里是沙盒，https://codesandbox.io/s/eloquent-chatterjee-609ww?file=/src/App.js

【问题讨论】：

标签： reactjs

【解决方案1】：

这是因为您在映射动态值时为所有评级组件使用相同的名称。您必须动态生成名称，例如：

<Rating
   name={item.name}
   value={item.value}
   precision={0.5}
   onChange={(e, value) => { console.log("on change", item, value) }}
/>

【讨论】：