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

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是只读的，不能直接修改。我们需要通过以下方式使用设置器setPage：

setPage(page+1)

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

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