如何正确更改状态?(只读错误)

Question

每次单击都会调用函数handleSubmit 。
在函数中，我必须将页码增加 1。
但是控制台错误未捕获错误："页面"是只读
的如何正确更改状态？

const Cards = () => {
  const [page, setPage] = useState(1);
  const handleSubmit = e => {
    e.preventDefault();
    setPage(page += 1);
    const axios = require('axios');
    const url = '/users'
    axios.get(url, {
      params: { page: page }
    }, {headers: {'Content-Type': 'text/javascript'}})
    .then(function (response) {
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
      // always executed
    });
  };
  return (
    // ...
  )
};
export default Cards;

Answer 1

而不是page += 1使用page + 1。您的状态应该是不可变的，因此在更新状态时=切勿使用运算符。每次执行此操作时，都应使用全新的值更新它。这应该可以在开发过程中节省大量时间。

Answer 2

通过编写setPage(page += 1);，您将值page+1分配给page。但page是只读的，不能直接修改。我们需要以以下方式使用二传手setPage：

setPage(page+1)

在这里，我们不直接为页面分配任何内容，而是告诉 setter 将递增的值设置为 page。

请尝试此操作，如果有任何问题，请告诉我。

Answer 3

我创建了一个类似的例子

https://codesandbox.io/s/functional-component-api-calls-qgho3

您可以使用 page + 1 .检查上面的例子