React, GraphQL: как получить доступ к результату рендеринга от дочернего элемента в родительском компоненте - PullRequest
0 голосов
/ 27 марта 2020

Надеюсь, что все в безопасности.

Извините, я не смог найти ответ в Интернете для моей конкретной 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
  }
}

Заранее благодарим вас за потраченное время.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...