个人中心
gpt4 book ai didi

javascript - 类型 'Element | undefined' 不可分配给类型 'ReactElement
转载 作者：行者123 更新时间：2023-12-03 16:10:46 26 4
gpt4 key购买 nike

我有一个看起来像这样的组件。此版本完美运行:

export default function StatusMessage(isAdded: boolean, errorMessage: string) {
  if (isAdded) {
    return <ResultAlert severity="success" text="User Added" />;
  } else {
    if (errorMessage !== '') {
      if (
        errorMessage.includes('email')
      ) {
        return <ResultAlert severity="error" />;
      }
      if (
        errorMessage.includes('phone number')
      ) {
        return (
          <ResultAlert severity="error" text="" />
        );
      } 
    }
  }
}
现在，我正在尝试改变我导出它的方式。我正在尝试这个: 
type StatusMessageProps = {
  isAdded: boolean; 
  errorMessage: string;
}

export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({
  isAdded,
  errorMessage
}) => {
但我不断收到一个错误: 
Type '({ isAdded, errorMessage }: PropsWithChildren<StatusMessageProps>) => Element | undefined' is not assignable to type 'FunctionComponent<StatusMessageProps>'.
  Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.
    Type 'undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.
I am using the same method on different pages but the error is only here
编辑:
我正在使用这样的组件: 
 const [isAdded, setIsAdded] = useState(false);

{isSubmitted && StatusMessage(isAdded, errorMessage)}
它给了我一个关于 isAdded 的错误 
Argument of type 'boolean' is not assignable to parameter of type 'PropsWithChildren<StatusMessageProps>'.ts(2345)

最佳答案

您一定忘记了在组件中返回一个值。您是否忘记了 return null 因为 void 0 是 React 组件的 Not Acceptable 结果？

export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({
  isAdded,
  errorMessage
}) => {
  if (isAdded) {
    return <ResultAlert severity="success" text="User Added" />;
  } else {
    if (errorMessage !== '') {
      if (
        errorMessage.includes('email')
      ) {
        return <ResultAlert severity="error" />;
      }
      if (
        errorMessage.includes('phone number')
      ) {
        return (
          <ResultAlert severity="error" text="" />
        );
      } 
    }

    // Here where you missed
    return null;
  }
}

关于javascript - 类型 'Element | undefined' 不可分配给类型 'ReactElement<any, string | (( Prop : any)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63132565/

26 4 0

文章推荐： svelte - 将样式添加到 svelte js 中的 svelte-routing Link 标签
文章推荐： TYPO3 访问受限页面 - 登录后重定向
文章推荐： android - 使用 MaterialButton 和 shapeAppearance 渐变颜色
文章推荐： android - 使用标志 -Dagger.hilt.disableModulesHaveInstallInCheck=true 从 Dagger 迁移到 Hilt 时抑制 @InstallIn 检查时出错
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com