Javascript 如何触发评级组件的重新呈现

我第一次试着做出反应。我遇到了一个问题，试图建立一个5星级的评级组件。它正确地打印所有日志。只是组件在状态更改时不会重新渲染。感谢您花时间阅读本文。这是

HTML:

JS:

class RatingApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
评级：0，
项目：[
{id:1，active:false}，
{id:2，active:false}，
{id:3，active:false}，
{id:4，active:false}，
{id:5，活动：false}
]
}
}
toggleClass（itemId）{
log（“itemId----”+itemId）；
var changedItems=this.state.items；
log（“id--”+changedItems[itemId-1].id）；
log（“活动----”+changedItems[itemId-1].active）；
console.log（“预变更数据项----”+变更数据项）；
对于（var i=1；i
*
))}
)
}
}
ReactDOM.render（，document.querySelector（“#app”））

删除此之后的=设置状态 第一个问题是这一部分

this.setState=({
        rating: itemId,
        items: changedItems
    });

应该是

this.setState({
        rating: itemId,
        items: changedItems
    });

删除此之后的=设置状态 第一个问题是这一部分

this.setState=({
        rating: itemId,
        items: changedItems
    });

应该是

this.setState({
        rating: itemId,
        items: changedItems
    });

错误就在这里

这是我的国家=({ 评级：itemId， 项目：变更数据项 })

将其更改为this.setState({ 评级：itemId， 项目：变更数据项 })

请参阅下文

class RatingApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
评级：0，
项目：[
{id:1，active:false}，
{id:2，active:false}，
{id:3，active:false}，
{id:4，active:false}，
{id:5，活动：false}
]
}
}
toggleClass（itemId）{
log（“itemId----”+itemId）；
var changedItems=this.state.items；
log（“id--”+changedItems[itemId-1].id）；
log（“活动----”+changedItems[itemId-1].active）；
console.log（“预变更数据项----”+变更数据项）；
对于（var i=1；i
*
))}
)
}
}
ReactDOM.render（，document.querySelector（#app））

span{
利润率：10px；
字体大小：25px；
}
span.active{
颜色：红色；
}

错误在

这是我的国家=({ 评级：itemId， 项目：变更数据项 })

将其更改为this.setState({ 评级：itemId， 项目：变更数据项 })

请参阅下文

class RatingApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
评级：0，
项目：[
{id:1，active:false}，
{id:2，active:false}，
{id:3，active:false}，
{id:4，active:false}，
{id:5，活动：false}
]
}
}
toggleClass（itemId）{
log（“itemId----”+itemId）；
var changedItems=this.state.items；
log（“id--”+changedItems[itemId-1].id）；
log（“活动----”+changedItems[itemId-1].active）；
console.log（“预变更数据项----”+变更数据项）；
对于（var i=1；i
*
))}
)
}
}
ReactDOM.render（，document.querySelector（#app））

span{
利润率：10px；
字体大小：25px；
}
span.active{
颜色：红色；
}

this.setState=（

应该是

this.setState（

this.setState

是一个你应该调用的函数，而不是要分配给它的属性。谢谢@FelixKling先生！这是有效的。如果你愿意把这个作为答案，我会接受你的解决方案。

this.setState=（

应该是

this.setState>）（

this.setState

是您应该调用的函数，而不是要分配给的属性。谢谢@FelixKling先生！这是有效的。如果您愿意将此作为答案，我将接受您的解决方案。

this.setState({
        rating: itemId,
        items: changedItems
    });