useState 在添加到先前状态时返回一个对象

Question

我有一个按钮和 onClick，我希望它在之前的偏移量上增加 20。但是，当我执行以下操作时，出于某种原因我得到了一个对象：

const [ offset, setOffset ] = React.useState(20);

const { data, fetchMore } = useQuery(GET_FEED, {
 variables: {
   offset: offset,
   limit: 10
 },
 fetchPolicy: 'cache-and-network'
});

<button onClick={(prevOffset) => setOffset(prevOffset + 20)>Next</button>

点击下一步后，请求抛出 400 并且浏览器说这些是变量：

variables   {…}
limit   10
offset  "[object Object]20"

如果我这样做：

<button onClick={() => setOffset(20)>Next</button>

它运行成功，但我坚持使用 20 的偏移量。

Answer 1

您正在传递 onClick event 参数。实际上，这是一个对象...

setState 允许您传递参数为旧状态的函数。我想这就是你的意思。

试试下面的方法。

const [ offset, setOffset ] = React.useState(20);

const { data, fetchMore } = useQuery(GET_FEED, {
 variables: {
   offset: offset,
   limit: 10
 },
 fetchPolicy: 'cache-and-network'
});

<button onClick={() => setOffset(prevOffset => prevOffset + 20)>Next</button>

useState 在添加到先前状态时返回一个对象

useState returning an object when adding to previous state

javascript

node.js

apollo

reactjs

apollo-client