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

编程问答 2022-04-23

问题描述

我有一个按钮和 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。

解决方法

您正在传入 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>
apolloapolloapolloapollo-clientjavascriptreactjsreactjsreactjsreactjs