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