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

Posted 2023-03-10

【中文标题】useState 在添加到先前状态时返回一个对象

【英文标题】：useState returning an object when adding to previous state

【发布时间】：2021-09-03 08:01:57

【问题描述】：

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

【问题讨论】：

尝试将函数传递给setOffset？ setOffset(prevOffset => prevOffset + 20)

那是因为onClick的第一个参数是event。

@evolutionxbox d'哦，非常感谢

【参考方案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>