Reactjs 为什么我会得到；对象作为React子对象无效；？

我试图在UserContext中使用_id、用户名和布尔值设置一个经过身份验证的用户，但是当我保存文件时，我得到了

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

这是我的UserProvider.tsx文件：

import React, { useState, createContext } from 'react'
import {authUser} from '../interface/Interface'

const defaultValues = {
    _id: undefined,
    username: undefined,
    authenticated: false,
}

export const UserContext = createContext<any>(null)

export const UserProvider = (props: { children?: React.ReactChild }) => {
    const [authenticatedUser, setAuthenticatedUser] = useState<authUser>(defaultValues)
    const { children } = props

    return (
        <UserContext.Provider value={[authenticatedUser, setAuthenticatedUser]}>
            {children}
        </UserContext.Provider>
    )
}

export const App = () => {
    return (
        <UserProvider>
            <DadJokesProvider>
                    <Routes>
                        <Navigation />
                    </Routes>
            </DadJokesProvider>
        </UserProvider>
    );
};

这是我使用authenticatedUser的地方：

    import {UserContext} from '../shared/provider/UserProvider';
const [authenticatedUser, setAuthenticateduser] = useContext(UserContext);({username:'',password:''});
    
    const signIn = async () => {
        try{
            const {data} = await DatabaseAPIService.login(loginCredentials)
            console.log(data)
            setAuthenticateduser(data)
        } catch(error){
            console.log(error)
            alert('wrong username or password')
        }
    };

最后是我的app.tsx文件：

import React, { useState, createContext } from 'react'
import {authUser} from '../interface/Interface'

const defaultValues = {
    _id: undefined,
    username: undefined,
    authenticated: false,
}

export const UserContext = createContext<any>(null)

export const UserProvider = (props: { children?: React.ReactChild }) => {
    const [authenticatedUser, setAuthenticatedUser] = useState<authUser>(defaultValues)
    const { children } = props

    return (
        <UserContext.Provider value={[authenticatedUser, setAuthenticatedUser]}>
            {children}
        </UserContext.Provider>
    )
}

export const App = () => {
    return (
        <UserProvider>
            <DadJokesProvider>
                    <Routes>
                        <Navigation />
                    </Routes>
            </DadJokesProvider>
        </UserProvider>
    );
};

export const App=（）=>{
返回(
);
};

您如何使用

？在某个地方，需要将孩子们转换成JSX。你在这样做吗？检查一下你在道具中作为“孩子”发送的内容。在我的登录视图中，经常会意外地发送一个对象而不是JSX。我已经用相关的signinview.tsx代码更新了帖子