Невозможно получить данные, и React не выдает никаких сообщений об ошибках.

Question

У меня есть этот компонент:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { translate } from 'react-i18next';

const API = `http://accountmanagement.ng.bluemix.net/v1/accounts/${accountGuid}/traits`;

class GetMFAValidation extends Component {
  constructor(props) {
    super(props);
    this.state = { data: '' };
  }

  render() {
    return (
      <div>
        <p>HOLA, I AM ${accountGuid}</p>
      </div>
    );
  }

  componentDidMount() {
    fetch(API).then(response => response.json()).then(data => {
        console.log('data -->', data);
        this.setState({ data });
      });
  }
}

GetMFAValidation.propTypes = {
  accountGuid: PropTypes.string.isRequired,
};

export default compose(
  connect(
    store => ({ accountGuid: store.global.accountGuid }),
    translate(),
  ),
)(GetMFAValidation);

И я вызываю его в другом компоненте, например:

import GetMFAValidation from "../path" И <GetMFAValidation />

Приложение вылетает, ноЯ не получаю никаких ошибок.

Answer 1

Ваша строка API содержит переменную:

const API = `http://accountmanagement.ng.bluemix.net/v1/accounts/${accountGuid}/traits`;

... но accountGuid здесь не доступен.

Вместо этого вы можете использовать функцию:

const getAPIUrl = (accountGuid) => 
  `http://accountmanagement.ng.bluemix.net/v1/accounts/${accountGuid}/traits`;

А затем передать accountGuid из реквизита при использовании:

componentDidMount() {
  const APIUrl = getAPIUrl(this.props.accountGuid)
  fetch(APIUrl).then(response => response.json()).then(data => {
    console.log('data -->', data);
    this.setState({ data });
  });
}

Надеюсь, это поможет.

Answer 2

в вашем методе выборки, попробуйте добавить перехват после этого и выведите ошибку, если это из-за выборки, ваша программа все еще будет работать, и вы получите ошибку

fetch(API).then(response => response.json()).then(data => {
    console.log('data -->', data);
    this.setState({ data });
  })
  .catch(error => console.log(error));