setState 的条件运算符答案

【问题标题】：conditional operator to setStatesetState 的条件运算符
【发布时间】：2019-12-09 19:04:19
【问题描述】：

我的 React 组件的渲染功能中有一个分页按钮。你能帮我把这个条件运算符转换成 setState 吗？我在控制台槽条件运算符中有很多这种黄色错误。我需要使用它，但我不知道如何使用它。

<button onClick={() => this.makeHttpRequestWithPage(this.state.current_page < this.state.total_pages ? this.state.current_page + 1 : this.state.current_page = this.state.total_pages)}>&raquo;</button>

不要直接改变状态。使用 setState()

【问题讨论】：

你不需要 setState 来工作：this.makeHttpRequestWithPage(this.state.current_page < this.state.total_pages ? this.state.current_page + 1 : this.state.total_pages)
一旦你进入下一页，他必须更新当前页面
@colburton，是的，这在没有 setState 的情况下运行良好，但我在控制台中收到黄色警告“不要直接改变状态。使用 setState()"
我们看不到makeHttpRequestWithPage 做了什么，可能还有更多的状态操作。如果您使用我的版本，您将不再更改状态。

标签： reactjs conditional-statements state operator-keyword setstate

【解决方案1】：

我认为您误解了 JavaScript 中“不变性”的概念。

基本上，如果我有一个不可变的 JS 对象，可以说状态是：

state = {
    name: "Dimitar",
    age: 18,
    hobbies: ["Programming", "Watching TV shows", "Studying"]
}

我不能这样直接变异：

state.name = "Something Else"

对象本身可以重新分配，但它的值是设置的（常量）。为了解决这个问题，React 创建了 setState 函数，它基本上复制了前一个状态对象，重新分配新值给它，然后覆盖前一个对象。

所以如果你想改变状态，或者改变它的内容，那么你需要以这种方式使用 setState：

setState({
     name: "Dimitar2"
})

在这里，您也可以将 prevState 作为参数传递并使用它，但我会让您对此进行研究。此外，您可以使用扩展运算符等。

【讨论】：

这不准确。你可以改变状态。 JS 完全没问题。这是 React 在 setState 中的渲染魔法，它使得永远不要直接改变状态。
@colburton 你知道为什么不建议在 javascript 中更改不可变变量吗？显然，可以更改不可变对象的值，但在控制台中会收到一个大警告。
仅供参考，不可变对象（unchangeable object）是一个对象，其状态在创建后无法修改。这些不是我的话，它在文档中。状态是一个不可变对象。它的内容不能被改变，改变它们的唯一方法是通过对象重新分配： oldObj = updatedObj 如果你挖掘它，它会在 setState 的引擎盖下发生：github.com/facebook/react/blob/master/packages/react/src/…

【解决方案2】：

<button onClick={() => 
this.setState({current_page: this.state.current_page < this.state.total_pages ? this.state.current_page + 1 : this.state.current_page}, () => this.makeHttpRequestWithPage(this.state.currentPage);)}>&raquo;</button>

在这里，您首先根据条件更新当前页面，然后在设置状态后进行调用。

【讨论】：

看起来不错，但我收到警告：警告：setState(...)：预计最后一个可选的 callback 参数是一个函数。而是收到：[object Promise]。
警告消失了，但页面默认显示不正确我有 current_page: 1, total_pages: 2 点击后我得到 current_page: 0
你能分享你的代码吗？ current_page 理想情况下不应达到 0
也许是代码的一部分，但明天。谢谢大家的帮助