我想更新子组件中的状态,但它不起作用。其实有很多东西。我想用 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])
最佳答案
您可以将映射的返回值转换为组件,然后使用 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])
...
关于javascript - "useState"不能在回调中调用。如何在 "useCallback"上使用状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62059232/