Reactjs 反应当前项始终是渲染组件列表中的第一项

我正在使用带有react的材质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;

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

e、 在我的例子中，当我点击AWS时，日志显示Java

---

这是一个沙盒，

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

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

{console.log（“on change”，item，value）}
/>

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