动态创建字段的星级一半评分

Question

我正在使用react-star-rating-component进行半星评级，它对于静态值可以正常工作，但是当我动态创建字段并希望对它进行一半评级时，它不能正常工作。我想给从数据库创建的每个字段评分。我尝试过此代码，请找出我错了

这是我的：-

 this.state = {
   datalan:{}
 }


render() {
  return (

  {this.state.skill && this.state.skill.slice(0,3).map(function(skills, i){
            return  <div key={i}>
            <div className="form-group row">
            <label className="col-md-4 col-form-label">{skills.keywordval}</label>
            <div className="col-md-8">
            <div style={{fontSize: 26}}>

                <StarRatingComponent
                name={skills.keywordval}
                starColor="#ffb400"
                emptyStarColor="#ffb400"
                value={this.state.keywordval} // i think here is some mistake
                onStarClick={this.onStarClickHalfStar.bind(this)}
                renderStarIcon={(index, value) => {
                        return (
                            <span>
                                <i className={index <= value ? 'fas fa-star' : 'far fa-star'} />
                            </span>
                        );
                    }
                }
                renderStarIconHalf={() => {
                    return (
                        <span>
                        <span style={{position: 'absolute'}}><i className="far fa-star" /></span>
                        <span><i className="fas fa-star-half i" /></span>
                        </span>
                    );
                }} />
            </div>
            </div>
            </div>
        </div>
        }, this)}
)}

onStarClickHalfStar(nextValue, prevValue, name, e) {
  const xPos = (e.pageX - e.currentTarget.getBoundingClientRect().left) / e.currentTarget.offsetWidth;
 console.log("xp====:",xPos);
 if (xPos <= 0.5) {
   nextValue -= 0.5;
 }
 console.log('name5: %s, nextValue: %s, prevValue: %s', name, nextValue, prevValue);

this.setState({datalan:nextValue});

}