reactjs - 错误:对象作为 React 子对象无效(找到:带有键 {} 的对象)
问题描述
我是第一次学习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.
点击这里查看完整代码
我认为问题在于这个文件。
// 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;
解决方案
我查看了您共享的存储库,问题在于List.tsx
组件以及您尝试从组件访问道具的方式。它应该是
const List = ({ title, children }: any) => (
代替
const List = (title: any, children: any) => (
在 react 功能组件中,props 对象只接受一个参数。
此外,如果您想在那里添加类型,您可以这样做{title:string; children: ReactElement| ReactElement[]}
推荐阅读
- c# - 从多个目标文件执行的单个 nuget.target 文件
- python - 将 astropy 表转换为字典列表
- css - 如何获取小部件的 CSS 属性?
- scala - Spark ForEachPartitionAsync 可以在工作节点上异步吗?
- angular - Item$.take 不是函数类型错误:item$.take 不是函数
- php - Laravel 5.6 - 当我使用 php artisan db:seed 时出现错误
- javascript - 将对象推送到数组
- javascript - 在javascript web3中将智能合约功能调用为aa字符串
- python - plt.hist() 创建的补丁对象不会被绘制
- javascript - Javascript 获取子数组的第二个元素(用逗号分隔)