setState的条件运算符

Question

我在render函数的React组件中有一个用于分页的按钮。您可以帮助我将此条件运算符转换为setState吗？我在控制台槽条件运算符中有很多这样的黄色错误。我需要使用它，但我不知道如何将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（）

Answer 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作为参数传递并使用它，但是我会让您对此进行研究。另外，您可以使用扩展运算符等。

Answer 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>

这里您首先根据条件更新当前页面，并在设置状态后拨打电话。