如何修复对象作为 React 子对象承诺无效

Question

我使用 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]）。如果您打算渲染一组子项，请改用数组。

Answer 1

未捕获的错误：对象作为 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基于异步请求。