javascript - 无法获取数据并且 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`;

然后在使用时从 props 中传入 accountGuid :

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

我希望这会有所帮助。