Reactjs 错误：对象作为React子对象无效（找到：具有键{}的对象）

我是第一次学习ts的初学者。提前感谢您分享您的知识。我正在列一张待办事项清单。我过去常常做出反应来完成它。但是现在我正在一起使用react和typescript来完成代码。 我犯了个错误。我不知道是什么问题。请帮帮我

错误：对象作为React子对象无效（找到：具有键{}的对象）。如果要呈现子对象集合，请改用数组。

单击以查看完整代码

我认为问题在于这个文件

//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;
};

import-React，{createContext，useReducer，useContext，Dispatch}来自'React'；
从“/reducer”导入减速机；
从“/actions”导入{Action}
导出接口ITodo{
id：字符串；
文本：字符串；
};
导出接口状态{
待办事项：ITodo[]；
已完成：ITodo[]；
}
接口上下文值{
国家：国家；
调度：调度；
}
导出常量初始状态={
待办事项：[]，
已完成：[]，
};
const ToDosContext=createContext({
州：初始州，
分派：（）=>{console.error（“在ToDoContext提供程序外部调用分派”）}
});
export const todoProvider=（{children}:{children:React.ReactNode}）=>{
const[state，dispatch]=useReducer（reducer，initialState）；
返回(
{儿童}
);
};
导出常量useTodosState=（）：State=>{
const{state}=useContext（ToDoContext）；
返回状态；
};
导出常量useTodosDispatch=（）：Dispatch=>{
const{dispatch}=useContext（ToDoContext）；
退货派送；
};

这是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;

从“React”导入React；
从“/Add”导入Add；
从“/Title”导入标题；
从“/Progress”导入进度；
从“/List”导入列表；
从“/ToDo”导入ToDo；
从“样式化组件”导入样式化；
从“../context”导入{useTodosState}；
常量应用=（）=>{
const{toDos，completed}=usetodostate（）；
控制台日志（toDos）；
返回(
{toDo.map（（toDo）=>(
))}
{已完成。映射（（toDo）=>(
))}
)
}
导出默认应用程序；

我查看了您共享的回购协议。问题在于

List.tsx

组件以及您试图从组件访问道具的方式。应该是

const List=（{title，children}:any）=>(

而不是

const List=（标题：任意，子项：任意）=>(

与react中一样，功能组件只接受props对象的一个参数

---

另外，如果您想在那里添加类型，您可以执行

{title:string；children:ReactElement | ReactElement[]}

我认为这是一种更好的方法。您可以使用

PropsWithChildren

了解详细信息

举个小例子

导出界面搜索道具{
身高：多少
}
函数搜索（{children}:PropsWithChildren）{
..
..
返回（）
}