不能用作JSX组件。它的返回类型＆＃x27; promist＆lt; element＆gt;＆＃x27;不是有效的JSX元素

Question

我有一个React组件 编辑器。我正在尝试使用async函数初始化 状态。但是我无法。

我们如何在react中做到这一点。

const Editor = () => {
  const { id } = useParams();
  const [schemas, updateSchemas] = useAtom(bfsAtom);
  const schema = id && _.get(schemas, id, {});

  type InitialStateType = {
    properties: KeyedProperty[];
    validations: ValidationDataProperty[];
  };
  const getInitialState = async (): Promise<InitialStateType> => {
    return {
      properties: createPropertiesFromSchema(schema),
      validations: initializeConditions(schema),
    };
  };

  const initialState = await getInitialState();

  const mainReducer = (
    { properties, validations }: InitialStateType,
    action: Action
  ) => ({
    properties: propertyReducer(properties, action),
    validations: validationReducer(validations, action),
  });
  const [state, dispatch] = useReducer(mainReducer, initialState);

  return (
    <PropertyContext.Provider value={{ state, dispatch }}>
      <SchemaEditor schema={schema}  />
    </PropertyContext.Provider>
  );
};

Answer 1

tl; dr 将async从顶层到内部的内部dok dot dot the Tracs

---

不是直接与您的问题联系在一起，而是我做错了的一件事是：

我有一个看起来像：

const MyComponent = async () => {
   ...
   const apiResponse = await apiFunction();

   return <div>
     
     {apiResponse.success && (
       <p>It was a success!</p>
     )}

   </div>
}

但的组件，您不应该在最高级别的组件中使用async。因此，要修复它我做到了：

const MyComponent = () => {
   ...
   const apiResponse = async () => {
     return await apiFunction();
   }

   return <div>
     
     {apiResponse().success && (
       <p>It was a success!</p>
     )}

   </div>
}