React中this.state作为渲染条件未生效，是否因使用不当？

你的猜测完全正确，问题确实和你对this.state的使用方式有关，具体来说是访问状态属性的路径错误导致按钮无法渲染。

核心问题分析 #

看你在render方法里的条件判断：

{ this.state.currentlySelected >= 1 && (
  <button
    className={css.topicslide__info__continue}
    onClick={() => this.props.dispatch(nextSlide())}
  >
    Continue
  </button>
) }

但你的状态结构里，currentlySelected是嵌套在topics对象下的：

this.state = {
  topics: {
    data: [...],
    maxSelectable: 1,
    currentlySelected: 0, // 这个属性在topics内部
  },
}

所以你直接访问this.state.currentlySelected得到的是undefined，而undefined >= 1的结果是false，这就导致按钮永远不会被渲染——而且因为这不是语法错误，所以控制台不会抛出报错信息。

修复方案 #

只需要把条件判断里的状态路径修正为正确的嵌套路径即可：

{ this.state.topics.currentlySelected >= 1 && (
  <button
    className={css.topicslide__info__continue}
    onClick={() => this.props.dispatch(nextSlide())}
  >
    Continue
  </button>
) }

额外优化建议 #

另外，在你的selectTopic和unselectTopic方法中，你先通过immutability-helper的update创建了新的状态对象，然后直接修改它的currentlySelected属性。虽然这能正常工作，但更符合不可变状态规范的做法是把currentlySelected的更新也整合到update的操作中，避免直接修改对象：

比如修改selectTopic里的状态更新逻辑：

const newTopics = update(state.topics, {
  data: {
    [id]: {
      selected: { $set: true }
    }
  },
  currentlySelected: { $set: state.topics.currentlySelected + 1 } // 把计数更新也加入update操作
})
// 移除这行：newTopics.currentlySelected = state.topics.currentlySelected + 1

同样的，unselectTopic里也可以做类似修改，这样能更好地保证状态的不可变性，减少潜在的状态意外变更问题。

内容的提问来源于stack exchange，提问作者Jason Procka