React中使用三元表达式在setState切换状态失效问题及修复

问题根源 #

1. 状态引用错误：你在setState的三元表达式里直接用了saved，但这个变量并没有指向组件的this.state.saved，相当于用未定义的值做判断，逻辑自然失效。
2. 文本匹配不统一：初始状态是"show saved"（小写开头、无前置空格），但你在判断里写的是"Show saved"（大写开头），之前直接设置的状态还带了前置空格" show hidden"，文本的大小写、空格不一致，导致条件判断永远不成立，状态没法切换。

修复步骤 #

方案一：修正状态引用与文本匹配

直接在判断里使用this.state.saved获取当前状态，同时统一文本的格式（大小写、空格）：

const changeTitle = () => {
  this.setState({ 
    saved: this.state.saved === 'show saved' ? 'show hidden' : 'show saved'
  })
}

方案二：使用函数式setState（更推荐）

因为React的状态更新是异步的，当依赖之前的状态来更新新状态时，用函数式setState能确保拿到最新的状态值，避免潜在的异步问题：

const changeTitle = () => {
  this.setState(prevState => ({
    saved: prevState.saved === 'show saved' ? 'show hidden' : 'show saved'
  }))
}

这样修改后，点击文本就能在show saved和show hidden之间正常切换了。

内容的提问来源于stack exchange，提问作者Colorful Codes