输入'元素 | undefined' 不可分配给类型 'ReactElement<any, string | （（道具：任何）

Posted 2023-02-22

【中文标题】输入\'元素 | undefined\' 不可分配给类型 \'ReactElement<any, string | （（道具：任何）

【英文标题】：Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any)输入'元素 | undefined' 不可分配给类型 'ReactElement<any, string | （（道具：任何）

【发布时间】：2020-11-17 19:14:49

【问题描述】：

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

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)

【参考方案1】：

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

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;
  

【讨论】：

您已经错过了第一个 else 的 return null 。再试试看：|

当你试图调用你的组件StatusMessage(isAdded, errorMessage)时你做了什么？

调用 graphql 查询并相应地设置值。在qs中添加

您的函数和组件似乎有相同的名称StatusMessage。那你能检查一下吗？

这样称呼它有效<StatusMessage isAdded=isAdded errorMessage=errorMessage/>