javascript - 无法获取数据，React没有给出任何错误消息

我有这个组成部分：

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 />

该应用程序崩溃了，但是我没有收到任何错误。

最佳答案

您的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 });
  });
}

我希望这有帮助。

关于javascript - 无法获取数据，React没有给出任何错误消息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53314789/