使用布尔值更新和读取状态

Question

我注意到 Javascript 中的布尔值状态。考虑下面的小型 React 实验 模仿 Facebook 中的 Like 按钮在客户端的工作方式：

export default class App extends Component {
    state = {
        liked: false,
        likes: 34
    }

    toggleLike = (e) => {
        this.setState(state => ({
            liked: !state.liked,
            likes: (!state.liked) ? state.likes + 1 : state.likes - 1
        }))
    }

    render() {
        return(
            <button onClick={this.toggleLike}>
                <label className={(this.state.liked) ? 'liked' : null}>Like:</label>
                <span>{this.state.likes}</span>
            </button>
        )
    }
}

如果this.state.liked 是true，则喜欢计数必须增加 1，并且“喜欢”标签必须添加一个名为 liked，将文本颜色变为浅蓝色。代码中没有错误，但这就是让我感到困惑的原因：

在toggleLike()方法中，条件为(!state.liked)；但在 HTML 中的 className 渲染中，它是 (this.state.liked)

我不明白它的意思是“如果新的状态值不等于初始值”还是“如果新的状态值是真或假”。

Answer 1

两者都在检查“新状态值是真还是假”。

渲染器根据当前状态值显示className（“如果新状态为真则做某事，否则做其他事”）。 另一方面，setState 使用否定值，因为它想根据之前的值设置喜欢（“如果新状态为假，则执行某项操作，否则执行其他操作”）。

setState 也可以使用state.liked 而不是!state.liked，然后不用写：

likes: (!state.liked) ? state.likes + 1 : state.likes - 1

代码是：

likes: (state.liked) ? state.likes -1 : state.likes + 1

底线 - 两者都可以使用 state.liked 并且可能不会那么混乱。