使用Fetch在React中进行数据作用域

Question

我试图了解如何使用fetch从API获取数据并使用它来创建React组件。 如果这是检索，存储和使用数据的正确方法，或者还有其他我可能不知道的方式，我会感到困惑（我在文档中读到了有关状态和装载的信息，但我无法理解周围。

JS

//Data
const url = 'https://api.tfl.gov.uk/BikePoint'; // API

fetch(url)
.then((resp) => resp.json()) // Transform the data into json
.then(function(data) {
  // How can I make data accessible outside this function?
 })

.catch(function(error) {
  console.log(JSON.stringify(error));
});

//React
const List = ({items, each}) =>

  <div className = "panel panel-default">
  <div className = "panel-heading"><h2>Bike points</h2></div>
    <div className = "panel-body">   

      <ul className = "list-group">{items.map((item, key) =>
        <ListItem key = {key} item = {each(item)} number={item.commonName}/>)}</ul>

    </div>
  </div>

const ListItem = ({item, arrival, number}) =>
  <li className = "list-group-item">{number}</li>

//How can access the data here?
ReactDOM.render(<List items={data} each={ListItem} />, document.querySelector('#main'))

密码笔

如果您能向我指出任何可以帮助我理解这一概念的资源，我将不胜感激。 先感谢您。

Answer 1

在示例代码中，您没有返回“ resp.json（）”，resp.json（）将返回一个promise，您需要返回该promise，如果解析成功，则在下一个.then（ ）将使用API​​响应中的对象填充。 然后，您可能希望将响应数据设置为组件状态以执行某些操作。

我用'create-react-app'创建了一个简单的react应用程序来演示这一点：

import React, { Component } from 'react'; //import 'React' default export, and { Component } non-default export from react
import fetch from 'isomorphic-fetch'; // isomorphic-fetch is used for both server side and client side 'fetch' (see https://github.com/matthew-andrews/isomorphic-fetch)
// App.css was a hangover from the create-react-app, it's not really needed for this basic example
const url = 'https://api.tfl.gov.uk/BikePoint'; // API




class App extends Component { // This is the same as 'extends 'React.Component'

    constructor(props) {
        super(props);
        this.state = {
            fetchedData: null // stores the result of the fetch response body converted to a javascript object
        };
    }

  fetchIt = () => {
      console.log('fetching it');
      fetch(url, { mode: 'cors' }) // Make sure fetch is cross-origin, it's not by default (see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) since the target URL of the API is a different 'origin' to our react app
          .then((resp) => {
            console.log(resp);
          return resp.json(); })
          .then((data) => { // data input parameter is the result of the resolved resp.json() Promise (see https://developer.mozilla.org/en-US/docs/Web/API/Body/json)
              console.log(data);
              this.setState({ fetchedData: data }); // setState sets the component state with the data from the API response
          })
          .catch(function(error) {
              console.log(JSON.stringify(error));
          });
  }



  render() {
      if(!this.state.fetchedData){ // only do the fetch if there is no fetchedData already (BTW this will run many times if the API is unavailable, or 'fetchIt() encounters an error)
          this.fetchIt();
      }

    return (
      <div>
          {
              this.state.fetchedData ? `fetched ${this.state.fetchedData.length} entries`  : 'no data' // This is a 'ternary' expression, a simple 'if->else'
              /* equivalent to:

                if(this.state.fetchedData) {
                    return `fetched ${this.state.fetchedData.length} entries`; // this is 'javascript string interpolation'
                } else {
                    return 'no data';
                }
              *
              * */
          }
      </div>
    );
  }
}

export default App; // Export our component to be used by other react higher order components (parents), in this case, it's imported in 'index.js', data is only fetched when the component renders.

在这里工作github回购： https : //github.com/finbarrobrien/fetchy/blob/master/src/App.js