React和JavaScript：只调用一次setState（）来更新状态

下面的

calculateTotalPages

功能计算将显示的总页面数。totalPages状态的初始值设置为0。当

calculateTotalPages

函数计算并返回总页面的值后，我应该在哪里调用setState来更新totalPages状态？我知道不能在render（）中调用setState

类项扩展组件{
状态={
项目：['item1'，'item2'，'item3'，'item4'，'item5'，'item6'，'item7']，
孤岛加载：false，
当前页面：1，
项目页面：3，
总页数：0
}
calculateTotalPages=（项目、项目页面）=>{
让我们一起去吧；
常量商=Math.trunc（items.length/itemsPerPage）；
常量余数=items.length%itemsPerPage；
如果（余数==0）{
getTotalPages=商；
}否则{
GetTotalPage=商+余数；
}
返回getTotalPage；
};
render（）{
const{items，totalPages，currentPage，itemsPerPage}=this.state；
const getTotalPages=this.calculateTotalPages（items，itemsPerPage）
日志（getTotalPage）
返回(
{getTotalPages}
)
}
}
导出默认项；

render（）函数应该是纯函数，这意味着它不修改组件状态，每次调用时返回相同的结果，并且不直接与浏览器交互

不要在

render

中调用它，只需调用

componentDidmount

componentDidMount() {
this.calculateTotalPages(this.state.items, this.state.itemsPerPage)
}

您可以在componentDidMount（）中立即调用setState（）。会的 触发额外的渲染，但它将在浏览器之前发生 更新屏幕。这保证了即使render（）将 在这种情况下被调用两次，用户将看不到中间层 国家

然后在函数中设置状态会更容易

  calculateTotalPages = (items, itemsPerPage) =>{
    let getTotalPages;
    const quotient = Math.trunc(items.length / itemsPerPage);
    const remainder = items.length % itemsPerPage;

    if(remainder === 0){
      getTotalPages = quotient;
    }else{
      getTotalPages = quotient + remainder;
    }

    this.setState({totalPages:getTotalPages}) //set state here

    return getTotalPages;
  };

render（）函数应该是纯函数，这意味着它不修改组件状态，每次调用时返回相同的结果，并且不直接与浏览器交互

不要在

render

中调用它，只需调用

componentDidmount

componentDidMount() {
this.calculateTotalPages(this.state.items, this.state.itemsPerPage)
}

您可以在componentDidMount（）中立即调用setState（）。会的 触发额外的渲染，但它将在浏览器之前发生 更新屏幕。这保证了即使render（）将 在这种情况下被调用两次，用户将看不到中间层 国家

然后在函数中设置状态会更容易

  calculateTotalPages = (items, itemsPerPage) =>{
    let getTotalPages;
    const quotient = Math.trunc(items.length / itemsPerPage);
    const remainder = items.length % itemsPerPage;

    if(remainder === 0){
      getTotalPages = quotient;
    }else{
      getTotalPages = quotient + remainder;
    }

    this.setState({totalPages:getTotalPages}) //set state here

    return getTotalPages;
  };

---

在基于类的组件中，您可以在

componentDidMount（）

中执行此操作，因为在第一次渲染后最初只调用一次

---

在功能组件中，您可以使用带有空数组的钩子作为第二个参数。

在基于类的组件中，您可以在

componentDidMount（）

中执行此操作，因为在第一次渲染之后，最初只调用一次

---

在函数组件中，您可以使用带有空数组的钩子作为第二个参数。

如果可能，我可能会在

componentDidMount

中进行设置，如果只需要设置一次，这并不能直接解决您的问题，但我想提供一个强烈的建议。不要在组件状态中存储派生数据（如总页面），这也被视为反模式。总页数是从

项目

和

项目页面

状态值进行的简单计算。Drew，因此基本上我应该在render中调用calculateTotalPages函数并获取值？不需要将其存储在状态中？这完全正确。谢谢。这很有意义，我已经更正了我的代码。如果可能的话，我可能会在

componentDidMount

中这样做，如果只需要设置一次，这并不能直接解决您的问题，但我想提供一个强有力的建议。不要在组件状态中存储派生数据（如总页面），这也被视为反模式。总页数是从

项目

和

项目页面

状态值进行的简单计算。Drew，因此基本上我应该在render中调用calculateTotalPages函数并获取值？不需要将其存储在状态中？这完全正确。谢谢。这很有道理，我已经更正了我的代码。很有道理。谢谢我是否也可以在componentDidMount中使用if语句来检查状态值是否与前一个状态值不同，以避免多次执行该函数？

componentDidMount

将只调用一次。但是当我们在

ComponentDidMount

方法中设置状态时，从技术上讲，

render

方法会被调用两次，这是有意义的。谢谢我是否也可以在componentDidMount中使用if语句来检查状态值是否与前一个状态值不同，以避免多次执行该函数？

componentDidMount

将只调用一次。但是当我们在

ComponentDidMount

方法中设置状态时，从技术上讲，

render

方法会被调用两次。