Надеюсь, что все в безопасности.
Извините, я не смог найти ответ в Интернете для моей конкретной c ситуации.
У меня есть Child component
, что Queries
, если пользователь вошел в систему и вернет true
или false
(по крайней мере, это мое ожидание).
Я хочу захватить этот результат в Parent component
и отображает form
, если истина. Но не уверен, как это сделать: я получаю один и тот же вывод независимо от того, вошел ли пользователь в учетную запись или нет.
Я пробовал несколько конфигураций, но не работал. Это моя последняя попытка.
ОБНОВЛЕНО Код, как отмечено на основе комментария 1:
Но получаю следующие ошибки:
Ошибка1:
Warning: Cannot update a component (`EditProfile`) while rendering a different component (`Query`).
in Query (at GetLoggedInUser
Ошибка2:
Uncaught Error: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
at reconcileChildFibers
Родительский Comp "EditProfile":
import React, { useState, useEffect } from 'react';
import { Query, Mutation } from 'react-apollo';
import { useHistory } from "react-router-dom";
import GetLoggedInUser from '../../../GetLoggedInUser'
// import { GetAuthUser } from './operations.graphql';
const EditProfile = ({match, location}) => {
const reqUser = match.params.username;
const prevUrl = location.pathname;
const history = useHistory();
const [isLoggedIn, setIsLoggedIn] = useState(false);
// const setLoginState = (e) => setIsLoggedIn(e)
return (
/*
<GetLoggedInUser user={reqUser} props={setLoginState}>
{console.log(`After query 'isLoggedIn' is: ${isLoggedIn}`)}
</GetLoggedInUser>
*/
// OLD Code
// <GetLoggedInUser user={reqUser} /> ? "show form" : "don't show form"
//This where I'm having trouble I think?? "Show form" shows up either case.
// ***NEW UPDATED***
<GetLoggedInUser user={reqUser} setIsLoggedIn={setIsLoggedIn}/>
)
}
export default EditProfile;
Дочерний (общий) комп "GetLoggedInUser" :
import React, { useState, useEffect } from 'react';
import { Query } from 'react-apollo';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { AuthUser } from './operations.graphql';
const GetLoggedInUser = ({user, setIsLoggedIn}) => {
const reqUser = user;
//const loggedIn = false;
return (
<Query query={AuthUser}>
{({loading, error, data}) => {
if (loading) return <p><FontAwesomeIcon icon="spinner" size="lg" spin /></p>
if (error) return <p>{`Error: ${error}`}</p>
const authUser = data.authUser.username;
// OLD code
// return ((authUser === reqUser) ? true : false)
// ***NEW UPDATED***
return setIsLoggedIn((authUser === reqUser) ? true : false)
}}
</Query>
)
}
export default GetLoggedInUser;
operations.graphql: (в основном запрашивает context[:current_user]
и возвращает его )
query AuthUser {
authUser {
id
username
}
}
Заранее благодарим вас за потраченное время.