Question

我在其中一个组件中提取API，并将其数据发送到dataAPI状态。它工作正常。

但我想开始将我的应用分成更小的组件。我希望能够从任何其他组件访问数据。而且我不想每次都要进行不同的API调用。

这是我下面的组件，其中提取数据。从应用程序中访问API数据的最佳方式是什么？

我目前还在使用setInterval()每分钟刷新一次数据。

谢谢！

export default class Home extends Component {

  constructor(props) {
    super(props);

    this.state = {
      dataAPI: [],
      isLoading: true
    };

    // Refresh data every 60 seconds (60,000 ms)
    setInterval(() => {
      this.componentDidMount();
    }, 60000);

  }

  componentDidMount() {
    this.fetchData();
  }

  render() {
    var {isLoading} = this.state;
    if(isLoading)
      return this.renderLoadingMessage();
    else
      return this.renderResults();
  }

  fetchData() {
    var url = 'https://www.myapi.com';
    fetch(url)
      .then( response => response.json() )
      .then( jsonData => {
        var myData = [];
        console.log(jsonData);
        myData.push(jsonData);

        this.setState({
          isLoading: false,
          dataAPI: [].concat(myData)
        });
      })
    .catch( error => console.log('Fetch error ' + error) );
  }

  renderLoadingMessage() {
    return (
      <View>
        <ActivityIndicator animating={true} />
      </View>
    );
  }

  renderResults() {
    var {isLoading} = this.state;
    var d = this.state.dataAPI[0];

    if ( !isLoading ) {
      return (
        <View>
          <Text>
            {d.artist}
          </Text>
        </View>
      );
    }
  }

};


AppRegistry.registerComponent('Home', () => Home);

Answer 1

您可能想要使用react redux。

它有点难以设置但是一旦你设置了它易于管理，你在应用程序的任何地方获取信息请参考此链接：Getting started with Redux。

它涵盖了使用redux的不同方面。从一个简单的计数器示例开始。它还涉及如何管理api调用，其中结果可以从应用程序的任何位置访问。

祝你好运！

获取API并使其数据可跨组件访问

1 个答案: