时间戳

首页 > 解决方案 > 有没有更好的方法来设置函数来响应钩子useState？

reactjs - 有没有更好的方法来设置函数来响应钩子useState？

问题描述

我想用反应钩子使用状态来设置状态。

首先我试过了。但它没有奏效。

const [action, setAction] = useState(null);
...
<button onClick={()=>{
  setAction(()=>{console.log('hi')})
}}>test</button>

第二。有效。

const [action, setAction] = useState({action: null});
...
<button onClick={()=>{
  setAction({
    action:()=>{
      console.log('hi')
    }
  })}
}>test</button>

因为如果我直接设置函数，状态变为未定义。

所以我通过对象类型的函数。

但我想知道是否有另一种方法可以用函数设置状态。

标签： reactjsreact-hooks

解决方案

我认为你需要的是useRef，而不是useState......！

如文档所述，如果您将一个函数传递给useState，它会将状态设置为value它获取after executing传递的函数...！

所以setAction(()=>{console.log('hi')})意味着将action状态设置为执行这个函数的结果()=>{console.log('hi')}，这给了你undefined（因为()=>{console.log('hi')}什么都不返回）。

如果你需要存储一个函数，也许试试这个......？

import { useRef } from 'react'

// ... other code

const functionRef = useRef(null)

<button
  onClick={() => functionRef.current = () => console.log('hi')}
/>

// ...

推荐阅读