错误：（数据：字符串）=＆gt;数字＆＃x27;不能分配给类型＆＃x27;（）=＆gt; void＆＃x27;

发布于 2025-02-13 12:07:50 字数 532 浏览 1 评论 0 原文

尝试将字符串推到数组时遇到错误。所有的帮助都得到赞赏。

错误消息 @ onclick：

type'（productName：string）=＆gt;数字“不能分配给type'（）=＆gt; void'.ts（2322） type.d.ts（59，5）：预期类型来自属性'onClick'，该属性在此处声明为'IntinerInsiCattributes＆amp; amp; ButtonProps'

下方包含了关联的代码

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

我已经在JSX

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

原文

Running into an error when trying to push string to array.
All help is appreciated.

Error message @ onClick:

Type '(productName: string) => number' is not assignable to type '() => void'.ts(2322)
types.d.ts(59, 5): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & ButtonProps'

I've include the associated code below

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

JSX

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉世弥音 2025-02-20 12:07:50

该按钮如何知道您单击的产品？

答案是，您需要为每个按钮创建一个新功能才能传递到点击的产品中。

例如：

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将永远不会注意到，并且永远不会重新渲染任何内容。这完全是一个不同的问题，但我想我应该提到。

How does the button know what product you clicked?

The answer is that you need make a new function for each button to pass in the product that was clicked.

For example:

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>
  </>
}

See playground

Final note that productList should be state and not a simple variable. If you just push things into array, react will never notice, and never re-render anything. That's a different problem entirely, but figured I should mention it.