提问人：chilly_maximus 提问时间：2/18/2023 最后编辑：chilly_maximus 更新时间：2/19/2023 访问量：39
对返回和错误的约束，以确保定义一个
Constraint on return and error to make sure one is defined
问：
我有一个简单的案例，钩子函数，它返回 为简单起见，让我们假设两者都是字符串。虽然 error 和 data 都可以在返回第二个时出现，但两者不可能一起未定义。{data, error}undefined
我有没有办法在打字稿中设置约束，永远不会发生两者都未定义的情况？我在 React 组件中使用函数，我想要这段代码
const myComponent: React.FC= function(){
const { data, error } = useMyCustomHook();
if ( error ) return<div> error </div>
if (data) return <div> data </div>
}
没事。相反，它会抛出
Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null'.
如果有一种方法可以告诉打字稿始终是正确的，那就不会在这里。error || data
一种解决方案是使两个接口一个是必需的，另一个是需要保留可选的，然后键入 return 以合并这两个接口，但这听起来像是一个在规模上不起作用的糟糕解决方案。想象一下，如果我想定义五分之一的属性，甚至五分之二的属性，会发生什么。errordatadataerroruseMyCustomHook
答：
1赞
Flat Globe
2/19/2023
#1
查看返回的类型会很有用。useMyCustomHook
如果数据可能是伪造的，例如 ，则当前代码将缺少一个条件。在这种情况下，您应该处理数据是虚假的。undefined
您可以像这样修改代码：
const MyComponent: React.FC = () => {
const { data, error } = useMyCustomHook();
if (error) return <div>error</div>;
if (!data) return <div>empty</div>;
// you can safely access to the data
return <div>data</div>;
};
或者，您可以使用常规函数作为组件，以免被限制为 .这应该仍然是一个有效的组件：React.FC type
const MyComponent = () => {
const { data, error } = useMyCustomHook();
if (error) return <div>error</div>;
if (data) return <div>data</div>;
}
评论