Как получить доступ к информации о пользователях в разных компонентах - PullRequest
Новая
       19

Как получить доступ к информации о пользователях в разных компонентах

0 голосов
/ 05 апреля 2019

Я создал приложение реагирования на портфолио пользователей.Это приложение имеет аутентификацию, поэтому только зарегистрированные пользователи могут видеть: зарегистрированных пользователей + их портфолио.В моем компоненте App.js я храню реквизиты пользователя.В моем портфолио компонент, который называется «Фолио».Я могу получить доступ к идентификатору вошедших в систему пользователей с помощью следующей переменной this.props.match.params.id, в которой отображается идентификатор зарегистрированного пользователя.Мне интересно, как я мог бы получить доступ к имени пользователя или электронной почте таким образом.После многих попыток мне кажется, что я могу получить доступ только к идентификатору пользователя

Вот код из App.js 

class App extends Component {
  constructor() {
    super();
    this.state = {loggedIn: false, user: {email: '', name:''}};
    this.logout = this.logout.bind(this);
    this.login = this.login.bind(this);
  }

  logout(props) {
    axios.get('api/logout')
      .then(res => {
        this.setState({loggedIn: false});
        props.history.push('/');
      })
      .catch( err => console.log(err));
    return null;
  }

  login(user) {

    this.setState({loggedIn: true, user: user});
  }

Вот компонент фолио.Обратите внимание, как я могу получить доступ к идентификатору пользователя с помощью this.props.match.params.id, но не могу получить доступ к имени или электронной почте. 

export default class Folio extends Component {
  constructor(props) {
    super(props);
    this.state = {
      folio: []
    };
  }

  componentDidMount() {
    console.log('Howdy ' + `${this.props.match.params.id}`);
    console.log('Howdy ' + `${this.props.user.name}`);
    axios.get(`/api/users/${this.props.match.params.id}/folios`)
      .then(response => {
        this.setState({folio: response.data});
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }

Я только добавляю :id к маршруту 

  <Link to={`/folio/${this.props.id}`}>
        <button className="button is-link" type="button">
              View Portfolios
        </button>
      </Link>

  <Route path="/folio/:id" render={(props) => <Folio {...props} user={this.state.user}/>} />

ОднакоЯ тоже ищу имя.

1 Ответ

0 голосов
/ 05 апреля 2019

Вы должны передать их компоненту, как вы сделали с id, и вы должны получить к ним доступ таким же образом, например, => this.props.match.params.name. Я полагаю, вы передаете компоненту только идентификаторы.

...