我正在尝试更改div上的css，背景颜色，基本上如果用户"收藏"了此特定项目，我希望背景更改，如果他再次单击它，它应该变回默认颜色，因为他不再"收藏"该项目。
我有用于数字更改的功能，但 css 把我搞砸了。我已经尝试了一些事情...
首先是我的组件代码...
constructor(){
super();
this.state = {favVoteIsSelected:''};
}
<div onClick={this.vote.bind(this)} className={'votes__element '+
this.state.favVoteIsSelected} id='fav'>
<p>{this.props.item.rating.fav.count}</p>
</div>
on onClick 函数(this.vote.bind(this((只是调用了一个 Meteor 方法，该方法将处理数据库部分，然后我将其用作渲染 css 的基础。
然后我所做的是使这个函数更改类名，然后更改背景颜色。
userHasVoted(){
let voteCheckFav = this.props.item.rating.fav.data;
voteCheckFav.map((user) => {
if (user.createdBy.userId === Meteor.userId()){
this.setState({favVoteIsSelected:'votes__element--selected'});
} else {
this.setState({favVoteIsSelected:''});
}
});
} // end of user has voted
然后，此函数会将状态更改为将更改背景颜色的类名。数据字段只是用户数据、用户名和 ID 的数组。
这是基本设置，问题出现在我尝试实施这些更改刷新器的地方。我尝试的第一个选项是使用 componentDidUpdate((，然后在里面运行 userHasVote 函数，该函数刚刚进行了无限循环，然后显示错误......
跟踪器重新计算功能的异常：
范围错误：超出最大调用堆栈大小
它确实适用于初始背景颜色更改，但在我超过堆栈大小后不会将其更改回默认值。
经过一些谷歌搜索和更多研究后，我尝试的下一个选项是将 Tracker.autorun 函数放入组件 DidMount((，并从那里调用 userHasVote 函数，这停止了导致上述错误的循环问题，但似乎没有更新页面的 css。
我只是有点卡在这里，我会继续努力做更多的研究，但似乎不能做对。我对流星和到达非常陌生，所以如果这是一个超级愚蠢的问题，我很抱歉。如果您知道有一个线程已经回答了我的问题，则无需完全回答我的问题，但是请您指出我正确的方向吗？
提前感谢，
克里斯
这感觉像是对状态的滥用 - 你的 css 类只依赖于 props 和用户的数据，UI 中似乎没有状态。我也不清楚当状态是标量时，为什么要做.map()。如果this.props.item.rating.fav.data是一个数组，那么您在映射循环期间会反复更改相同的标量状态，这是问题的一部分。
更典型的模式是只创建一个返回所需类的函数。
constructor(){
super();
this.state = {favVoteIsSelected:''};
}
userHasVoted(userId){
return `votes_element ${userId === Meteor.userId() ? 'selected' : ''}`;
}
。
<div
onClick={this.vote.bind(this)}
className={this.userHasVoted(this.props.item.createdBy.userId)}
>
<p>{this.props.item.rating.fav.count}</p>
</div>
假设this.props.item.createdBy.userId是当前项目的userId(我假设您的 ' 正在循环中呈现(。
另请注意，您的 css 有点奇怪。您的代码看起来会生成votes__element votes__element--selected' orvotes__elementas the two possibilities. You probably just wantvotes__elementandvotes__element选定with选定"是一个更改选定元素外观的类。