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

Question

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

错误：

无法在回调中调用 React Hook "useState"。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

代码：

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])
...