React中箭头函数绑定onClick触发setState不生效问题排查

问题根因分析 #

1. 事件绑定写法的常见误区 #

• 写法onClick={setEarned(calculateEarned)}的问题：组件渲染阶段就会直接执行setEarned函数，将函数执行的返回值（默认是undefined）赋值给onClick属性，因此只会在页面加载时触发一次，后续点击事件触发时没有可执行的函数，自然无效。
• 你最初写的onClick={() => setEarned(calculateEarned)}本身的事件绑定逻辑是符合规范的，问题出在自定义按钮组件的实现缺陷。

2. 自定义Button组件的核心问题 #

你封装的Button、PrimaryButton组件只接收了title参数，没有将外部传入的onClick等属性透传给底层的原生button节点，因此无论你给自定义组件传入什么事件处理函数，都不会被绑定到真正可点击的DOM元素上，自然点击无响应。

修复方案 #

修改自定义Button组件的代码，将接收的剩余属性全部透传给底层的styled组件节点即可：

import styled from "styled-components"

const Btn = styled.button`
    /*some css codes*/
`

const PrimaryBtn = styled(Btn)`
    /*some special css codes for primary button*/
`

export const Button = ({ title, ...rest }) => {
    return <Btn {...rest}>{title}</Btn>
}

export const PrimaryButton = ({ title, ...rest }) => {
    return <PrimaryBtn {...rest}>{title}</PrimaryBtn>
}

修复后使用onClick={() => setEarned(calculateEarned())}的写法更符合语义，也能避免函数式更新的隐式参数带来的潜在问题。

内容的提问来源于stack exchange，提问作者saintyusuf