javascript - 基于布尔值的反应渲染状态:三元不工作
问题描述
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
推荐阅读
- android - startActivity 运行,但小米红米 Note 4 上未显示活动
- javascript - 如何在我的按钮上拥有一个类变量以及 Bootstrap 类?
- jquery - 使用两个属性(例如类和值)选择的 jQuery 更改
- java - 查询“Java 中的货币转换问题”中的输出
- raspberry-pi - [VOLTTRON]:bootstrap.py 无法运行虚拟环境
- javascript - 使用 Yup 进行验证以检查号码长度
- r - sqlAppendTable 和 dbExecute 有效,但 dbAppendTable 无效。为什么?
- html - Bootstrap CSS 文件不会加载到 PDF usinf Flying Saucer 核心中
- javascript - 如何在javascript中动态附加键中的字符串
- matlab - Matlab:使用Splitapply编写多个文件