javascript 在setState函数传递给子级时向该函数添加重载

nxagd54h 于 2023-02-02 发布在 Java

关注(0)|答案(1)|浏览(145)

我想将setState传递给子进程，但是当setState调用时，我需要重载更多的操作。
我能做到，
但我不能接受setState的行为，以获得正常的setState工作的prev状态。
示例：
父函数

function Parent (){
    const [isOpen, setIsOpen] = useState(false)

    const $setIsOpen = (isOpen) => {
    //do somthing 
    setIsOpen(isOpen)
   }

   Child(isOpen ,$setIsOpen)
}

子函数

function Child (isOpen, setIsOpen){
  
   setIsOpen(true) //this work

   setIsOpen((prevState) => (!prevState))//but this doesn't work

}

你怎么能这么做？
如果你能给我一个TypeScript的例子，我将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/75314900/adding-an-overload-to-the-setstate-function-when-that-passes-to-the-child

1条答案

按热度按时间

xuo3flqw1#

在这种情况下，对于typescript，您应该使用正确的类型，因为是布尔值将是：React.SetStateAction<boolean>。它可以以与setState函数相同的方式接收值。

const [isOpen, setIsOpen] = useState(false)

const $setIsOpen = (value: React.SetStateAction<boolean>) => {
    //do something...
    setIsOpen(value)
}

现在，对于Child组件，为props添加适当的类型。

interface IChildProps {
    isOpen: boolean
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
}

const Child: React.FC<IChildProps> = ({ isOpen, setIsOpen }) => {
    setIsOpen(true) //this work
    setIsOpen((prevState) => (!prevState))// Now this works
    return (<></>)
}

只要考虑到传递给$setIsOpen的值现在可能是一个函数，如果你要有一些依赖于该值的逻辑，需要检查内部。

注：我定义的功能作为组件，但正常的功能将是相同的类型。*

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 在setState函数传递给子级时向该函数添加重载

1条答案

相关问题

热门标签

最新问答