如何解决在状态下基于布尔的React渲染:三元不起作用
React Dev Tools向我显示状态已成功更改,但是未呈现正确的组件。
这是按钮之间的三元状态,可以切换状态:
return (
<div>
<div>{questionBlocks}</div>
<button className="advanced-options" onClick={this.toggleAdvanced}>
{this.state.advancedText}
<span>
{this.showAdvanced ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</span>
</button>
</div>
);
这是toggleAdvanced功能(效果很好,因为我在切换showAdvanced时成功显示了新元素:
toggleAdvanced = (e) => {
e.preventDefault();
if (this.state.showAdvanced === true) {
this.setState((prevState) => ({
showAdvanced: !prevState.showAdvanced,}));
} else {
this.setState((prevState) => ({
showAdvanced: !prevState.showAdvanced,}));
}
};
解决方法
问题可能在这里
<span>
{this.showAdvanced ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</span>
您正在使用this.showAdvanced
,但是应该是this.state.showAdvanced
您在三元组中缺少state
。应该是this.state.showAdvanced
,而不是this.showAdvanced
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。