无法调用可能是“未定义”的对象。 ReactTypescript 通过将状态设置器作为道具传递答案

【问题标题】：Cannot invoke an object which is possibly 'undefined'. ReactTypescript by passing state setter as props无法调用可能是“未定义”的对象。 ReactTypescript 通过将状态设置器作为道具传递
【发布时间】：2021-10-11 10:27:25
【问题描述】：

我正在将状态道具从父母传递给孩子：

家长：

const [refresh, setRefresh] = React.useState<boolean>(true);

传递给组件

<Chart setRefresh={setRefresh}/>

儿童

interface IChart {
    refreshChart?: boolean;
    setRefresh?: (newRefresh: boolean) => void;
}

const Chart: React.FunctionComponent<IChart> = ({refreshChart, setRefresh}) => {

   const handleRefresh = () => {
      setRefresh(false);
   }

}

显然它与 IChart 界面中的类型有关，就好像我使用 any 或不使其成为可选的它可以工作，但我需要它是可选的并且想要避免任何。

【问题讨论】：

标签： reactjs typescript react-hooks use-state

【解决方案1】：

显然这与 IChart 接口中的类型有关，就好像我使用 any 或不使其成为可选的一样，但我需要它是可选的并且想要避免任何。

如果您想保持该属性是可选的，那么您必须处理它是可选的事实，或者首先对其调用进行检查：

const Chart: React.FunctionComponent<IChart> = ({refreshChart, setRefresh}) => {
    const handleRefresh = () => {
        if (setRefresh) {         // ***
            setRefresh(false);
        }
    };
}

...或使用默认值：

const Chart: React.FunctionComponent<IChart> = ({refreshChart, setRefresh = (b: boolean) => {}}) => {
//                                                                       ^^^^^^^^^^^^^^^^^^^^^
    const handleRefresh = () => {
        setRefresh(false);
    };
}

您甚至可以根据setRefresh 是否存在来创建handleRefresh，如果没有提供setRefresh，甚至可能更改组件呈现的内容（例如，不刷新UI）。

【讨论】：

【解决方案2】：

这是因为在IChart 接口中你说这个属性是可选的，所以它是“可能未定义的”。只需删除“？”如果需要该值，则来自setRefresh。

【讨论】：

OP 说："...但我需要它是可选的..."

【解决方案3】：

我用类似的情况做一个简单的if condition 基本上是因为如果对其进行调整，将来可能会有队友来错误地集成它，或者为其添加默认值

 const handleRefresh = () => {
     if(setRefresh)
      setRefresh(false);
   }

【讨论】：