亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何修復對象作為 React 子對象承諾無效

如何修復對象作為 React 子對象承諾無效

達令說 2021-12-23 16:04:09
我使用 react 創建了一個電子學習應用程序,并希望將路線拆分給許多用戶(學生、教師和管理員),因此我使用了這種方法新路由.jsconst NewRoute = ({    component: Component,    type: type,    ...rest}) => (    <Route        {...rest}        render={ async props => {            console.log(await CT.checkType(type));            return CT.checkType(type) === false ? (                <Redirect to='/login' />            ) : (                <Component {...props} />            )        }        }    />);檢查類型.jsexport default {  checkType: async (type) => {    try{      const res = await axios.get('/api/check/');      console.log('api response',res);      return true    } catch(err) {      console.error(err.message);      return false    }  }}未捕獲的錯誤:對象作為 React 子對象無效(找到:[object Promise])。如果您打算渲染一組子項,請改用數組。
查看完整描述

1 回答

?
墨色風雨

TA貢獻1853條經驗 獲得超6個贊

未捕獲的錯誤:對象作為 React 子對象無效(找到:[object Promise])。如果您打算渲染一組子項,請改用數組

您收到此錯誤是因為您將異步函數傳遞給render,它是一個Promise對象。您需要傳遞一個 React 組件。這意味著此檢查CT.checkType(type) === false不能是異步調用。

所以你試圖做的事情是不可能的。

如果你想根據請求渲染一個組件,你需要的地方是什么。

您需要聲明檢查以下內容:

  • 檢查它是否正在加載

  • 檢查它是否有效

所以你首先設置路由正在加載(渲染一些加載組件)。承諾完成后,您設置正在加載為 false 并設置它是否有效,它將返回Redirector Component。

我為這種情況做了一個非常簡單的要點,但邏輯是這樣的:

const PrivateRoute = ({ component: Component, ...otherProps }) => {


    const { isAuthenticated, isLoading } = useContext(AuthContext)


    return (

        <Route

            {...otherProps}

            render={props => (

                !isLoading

                    ?

                    (

                        isAuthenticated

                            ?

                            <Component {...props} />

                            :

                            <Redirect to={otherProps.redirectTo ? otherProps.redirectTo : '/signin'} />

                    )

                    :

                    <Loading />

            )}

        />

    )


}

在AuthContext它內部調用一個方法,該方法設置isAuthenticated并isLoading基于異步請求。


查看完整回答
反對 回復 2021-12-23
  • 1 回答
  • 0 關注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號