错误：(数据：字符串)=> 数字' 不能分配给类型"() => void"

Question

尝试将字符串推入数组时遇到错误。感谢所有的帮助。

错误信息@ onClick:

Type '(productName: string) =>数字'不能赋值给类型'()=>无效的.ts (2322)types.d。ts(59,5):期望的类型来自属性'onClick'，它在类型'IntrinsicAttributes &ButtonProps '

我在

下面包含了相关的代码

const productList : string[] = [];
const handleClick = useCallback((productName:string) => productList.push(productName),[]);

JSX

<Button primary onClick={handleClick}>Add Product</Button>

Answer 1

按钮如何知道你点击了什么产品?

答案是，您需要为每个按钮创建一个新函数，以传递所单击的产品。

例如:

function Button({ onClick, children }: { onClick: () => void, children: React.ReactNode }) {
return <button onClick={onClick}>{children}</button>
}
function ProductList() {
const productList : string[] = []; // this should be state
const handleClick = useCallback((productName:string) => productList.push(productName),[]);

return <>
<div>
Product A
<Button onClick={() => handleClick('A')}>Add Product</Button>
</div>
<div>
Product B
<Button onClick={() => handleClick('B')}>Add Product</Button>
</div>
</>
}

看到操场

---

最后注意，productList应该是状态的，而不是一个简单的变量。如果你只是把东西推入数组，react永远不会注意到，也永远不会重新渲染任何东西。那是完全不同的问题，但我觉得我应该提一下。