Question

我想更新Child组件中的状态，但是不起作用。实际上，有很多东西。我想用map列出每个项目。

错误：

不能在回调内部调用React Hook“ useState”。必须在React函数组件或自定义的React Hook函数中调用React Hooks

代码：

const renderItems = useCallback(() => {
  return items.map((item, idx) => {
    const { name } = room
    const [isCopiedURL, setIsCopiedURL] = useState(false)

    return (
      <li key={idx}>
        <CopyToClipboard
          text={item.name}
          onCopy={() => setIsCopiedURL(true)}
        >
          {item.name}
        </CopyToClipboard>
      </li>
    )
  })
}, [items])

Answer 1

您可以将映射的返回值转换为组件，然后在其中使用useState，因为挂钩是在功能组件中使用的。

根据规则，您可以在诸如map的功能中使用它们

const Item = ({room, item}) => {
    const { name } = room
    const [isCopiedURL, setIsCopiedURL] = useState(false)

    return (
      <li key={idx}>
        <CopyToClipboard
          text={item.name}
          onCopy={() => setIsCopiedURL(true)}
        >
          {item.name}
        </CopyToClipboard>
      </li>
    )
}

...
const renderItems = useCallback(() => {
  return items.map((item, idx) => {
     return <Item room={room} item={item} key={idx} />
  })
}, [items])
...

不能在回调内部调用“ useState”。如何在“ useCallback”上使用状态？

1 个答案: