javascript - "useState"不能在回调中调用。如何在 "useCallback"上使用状态？

Question

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

错误:

React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

编码:

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在其中，因为钩子(Hook)是为了在功能组件中使用。

根据规则的规则，您可以在 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])
...