参数如何在 useState 函数中箭头函数的单行表达式中工作

Question

 const tick = () => {
     setCount(prevCount => prevCount+1);
        
       // setCount(count+1);
    }

我的问题是 prevCount 变量从哪里获得它的初始值？提供给 setCount() 的表达式如何工作？

我创建了一个反应示例来解释。

React js example，请参考interval.jsx组件中的tick函数。

更新：根据 Dennis Vash 对我的问题的评论，我正在向 setCount() 提供回调函数，那么如果我这样写为什么它不起作用？

   const tick = () => {
           setCount(updateCount(count))
            
           // setCount(count+1);
        }

     const updateCount = (myCount) => {
        return myCount + 1;
    }

Answer 1

箭头函数是这样工作的，

对于单个参数括号可选，
prevCount => prevCount+1 -> function(prevCount){return prevCount+1}
(prevCount) => prevCount+1 -> function(prevCount){return prevCount+1}

并且对于多个参数你需要添加括号，
(prevCount, a, b, c) => prevCount+1 -> function(prevCount, a, b, c){return prevCount+1}

而对于空参数需要加空括号，
() => prevCount+1 -> function(prevCount){return prevCount+1}

如需了解更多信息，请阅读 MDN 的文档

＃＃更新：

在您更新的问题中，updateCount(count) 被直接调用。所以使用这样的东西，

setCount(updateCount)

Answer 2

您正在从 useState 挂钩中获取 setCount 函数。它本身就是一个 React 内置函数。

所以setCount是一个接受函数作为回调函数的函数。你的代码

setCount(prevCount => prevCount+1);

让我们为您简化一下

setCount(function(prevCount) {
    return prevCount+1
})

所以这里可以看到setCount接受了一个函数，这个函数会在setCount函数执行的最后一步被回调，此时setCount会传递一个之前的值状态变量作为回调函数的参数。

参数如何在 useState 函数中箭头函数的单行表达式中工作

How parameter is working in single line expression of arrow function in useState function

reactjs

arrow-functions