Error: Objects are not valid as a React child (found: object with keys {})

Question

我是初学者，第一次学习ts。预先感谢您分享您的知识。我正在列一个待办事项清单。我曾经反应来完成它。但是现在我正在使用 react 和 typescript 一起完成代码。我得到一个错误。我不知道是什么问题。请帮助我。

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

点击here查看完整代码

我认为问题出在这个文件上。

// contet.tsx

import React, { createContext, useReducer, useContext, Dispatch } from 'react';
import reducer from "./reducer";
import { Action } from './actions'

export interface ITodo {
  id: string;
  text: string;
};

export interface State {
  toDos: ITodo[];
  completed: ITodo[];
}

interface ContextValue {
  state: State;
  dispatch: Dispatch<Action>;
}
export const initialState = {
  toDos: [],
  completed: [],
};

const ToDosContext = createContext<ContextValue>({
  state: initialState,
  dispatch: () => { console.error("called dispatch outside of a ToDosContext Provider") }
});

export const ToDosProvider = ({ children }: { children: React.ReactNode }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <ToDosContext.Provider value={{ state, dispatch }}>
      {children}
    </ToDosContext.Provider>
  );
};

export const useTodosState = (): State => {
  const { state } = useContext(ToDosContext);
  return state;
};

export const useTodosDispatch = (): Dispatch<Action> => {
  const { dispatch } = useContext(ToDosContext);
  return dispatch;
};

这是App.tsx

import React from "react";
import Add from "./Add";
import Title from "./Title";
import Progress from "./Progress";
import List from "./List";
import ToDo from "./ToDo";
import styled from "styled-components";
import { useTodosState } from '../context';

const App = () => {
  const { toDos, completed } = useTodosState();
  console.log(toDos);
  return (
    <Title>
      <Add />
      <Progress />
      <Lists>
        <List title={toDos.length !== 0 ? "To Dos" : ""}>
          {toDos.map((toDo) => (
            <ToDo key={toDo.id} id={toDo.id} text={toDo.text} isCompleted={false} />
          ))}
        </List>
        <List title={completed.length !== 0 ? "Completed" : ""}>
          {completed.map((toDo) => (
            <ToDo key={toDo.id} id={toDo.id} text=
              {toDo.text} isCompleted />
          ))}
        </List>
      </Lists>
    </Title >
  )
}
export default App;

Answer 1

我查看了您分享的回购协议，问题出在 List.tsx 组件以及您尝试从组件访问道具的方式。应该是

const List = ({ title, children }: any) => (

而不是

const List = (title: any, children: any) => (

在 React 中，功能组件只接受一个参数 props 对象。

此外，如果你想在那里添加类型，你可以 {title:string; children: ReactElement| ReactElement[]}

Answer 2

我认为这是解决这种情况的更好方法。您可以使用 PropsWithChildren，也可以 check it out 了解详情。

举个小例子

export interface SearchProps {
  height: number
}

function Search({ children }: PropsWithChildren<SearchProps>) {
..
..
return()
}

Error: Objects are not valid as a React child (found: object with keys {})

Error: Objects are not valid as a React child (found: object with keys {})

typescript

reactjs

tsx

react-hooks