组件不能用作 JSX 组件。它的返回类型 'Element[]' 不是有效的 JSX 元素

IT技术 reactjs typescript
2021-05-19 11:19:48

我目前在Todos内部组件上收到以下错误TodoApp.tsx：“Todos”不能用作 JSX 组件。它的返回类型 'Element[]' 不是有效的 JSX 元素。类型 'Element[]' 缺少类型 'Element' 中的以下属性：type、props、key

这是我的文件夹结构

TodoApp.tsx

function TodoApp() {
  return (
    <Body>
      <AppDiv>
        <Form />
        <Todos />
        <Footer />
      </AppDiv>
    </Body>
  );
}

Todos.tsx

function Todos(): JSX.Element[] {
  const todos = useSelector((state: RootState) => state.todos);
  const footer = useSelector((state: RootState) => state.footer);

  if (footer.hideAll) {
    if (footer.showCompleted) {
      return todos
        .filter((todo) => !todo.completed)
        .map((todo: any) => (
          <>
            <ul>
              <Todo todo={todo} />
            </ul>
          </>
        ));
    }
    return todos.map((todo) => (
      <>
        <div>
          <Todo todo={todo} />
        </div>
      </>
    ));
  }

  return todos.map(() => (
    <>
      <div></div>
    </>
  ));
}

Todo.tsx

type Todo = {
  todo: TodoProps;
};

const Todo = ({ todo }: Todo) : JSX.Element => {
  const [isEditing, edit] = useState<boolean>(false);
  const dispatch = useDispatch();

  if (!isEditing) {
    return (
      <TodoDiv>
        <Li
          key={todo.id}
          completed={todo.completed}
          onClick={() => dispatch(completeTodo(todo.id))}
          // style={{
          //   textDecoration: todo.completed ? "line-through" : "none"
          // }}
        >
          {todo.text}
        </Li>
        <TodoBttns>
          <Button edit onClick={() => edit(!isEditing)}>
            <img src={editBttn} alt="Edit Button" />
          </Button>
          <Button delete onClick={() => dispatch(deleteTodo(todo.id))}>
            <img src={deleteBttn} alt="Delete Button" />
          </Button>
        </TodoBttns>
      </TodoDiv>
    );
  } else {
    return (
      <FormEdit>
        <InputForm key={todo.id} {...{ todo, edit }} />
      </FormEdit>
    );
  }
};

TodoProps 接口如下：

interface TodoProps {
  text: string;
  completed: boolean;
  id: string;
}

已经尝试过用碎片包裹地图项目的修复，但我仍然无法让它工作。到目前为止，解决问题的唯一方法是在顶部声明Todos.tsx为function Todos(): any

附带说明：我正在使用样式化组件，但我认为问题与库无关。

3个回答

组件需要返回单个根元素。通过将片段用作单个根元素，您可以使用片段将元素数组打包为单个元素。

所以这什么都不做：

function Todos(): JSX.Element {
  return todos.map(todo => (
    <>
      <li>{todo.task}</li>
    </>
  )
}

因为它现在返回一个[<><li/></>, <><li/></>, ...]. 该片段必须是单个根元素。

您需要像这样使用片段：

function Todos(): JSX.Element {
  return <>{
    todos.map(todo => <li>{todo.task}</li>)
  }</>
}

您将所有返回的 JSX 嵌套在一个片段中。

使用这种模式，你可能会得到这样的结果：

function Todos(): JSX.Element {
  const todos = useSelector((state: RootState) => state.todos);
  const footer = useSelector((state: RootState) => state.footer);

  if (footer.hideAll) {
    if (footer.showCompleted) {
      return <>{
        todos
          .filter((todo) => !todo.completed)
          .map((todo: any) => (
            <ul>
              <Todo todo={todo} />
            </ul>
          ))
      }</>
    }
    return <>{
      todos.map((todo) => (
        <div>
          <Todo todo={todo} />
        </div>
      ))
    }</>
  }

  return <>{
    todos.map(() => (
      <div></div>
    ))
  }</>
}

// Works without error
<Todos />

请注意每个 return 语句如何只返回一个JSX.Element：片段。

操场

您需要返回一个 JSX 元素，而不是一个数组。包装整个组件是一个解决方案，但您需要在 map/filter 函数之外进行。

Todos.tsx

function Todos(): JSX.Element {
  const todos = useSelector((state: RootState) => state.todos);
  const footer = useSelector((state: RootState) => state.footer);

  if (footer.hideAll) {
    if (footer.showCompleted) {
      return (
        <>
          {todos.filter((todo) => !todo.completed).map((todo: any) => (
            <ul>
              <Todo todo={todo} />
            </ul>
           ));
          }
        </>
    }
    return (
      <>
        {todos.map((todo) => (
          <div>
            <Todo todo={todo} />
          </div>
        ));
        }
      </>
  }

  return (
    <>{todos.map(() => <div />)}</>
  );
}

就我而言，这是一个被遗忘的导入。基本上复制粘贴了我的一些代码并忘记导入其中一个组件，这是我收到的错误消息。

其它你可能感兴趣的问题
上一篇为什么打印的对象比原始模型小？ 下一篇如何使 react-hook-form 在一页中处理多个表单？