如何正确更改状态？ （只读错误）

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

我创建了一个类似的例子

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

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

Answer 3

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

setPage(page+1)

在这里，我们不是直接给page分配任何东西，而是告诉setter将增量值设置为page 。

请尝试这个，让我知道是否有任何问题。