使用反应显示来自 fetch api 的数据答案

【问题标题】：displaying data from fetch api using react使用反应显示来自 fetch api 的数据
【发布时间】：2017-11-26 09:02:38
【问题描述】：

我正在开发一个简单的网站，它使用 react 将来自 API(JSON) 的数据显示到页面中。

我正在使用 fetch() API。

我能够从 API 获取数据并将其设置为“应用”组件状态，但我无法将其传递给我手动创建的表和行组件。

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {ticker: {}, volume: {}}
    this.loadData = this.loadData.bind(this)
    this.loadData()
  }

  loadData () {
    fetch(ticker)
          .then((resp) => resp.json())
          .then((data) => {

            this.setState({
              ticker: data
            })
          })
          .catch((err) => {
            console.log(err)
          })
    fetch(volume)
          .then((resp) => resp.json())
          .then((data) => {

            this.setState({
              volume: data
            })
          })
            .catch((err) => {
              console.log(err)
            })
  }


  render () {
    return (
      <div>
        <Navbar />
        <div className='container'>
          <div className='align'>
            <div className='element' />

          </div>
          <Table volume={this.state.volume} ticker={this.state.ticker} />

        </div>
      </div>

    )
  }
}

底线：我有一个包含数据的 API，我有 3 个组件，表格，它也有一个行组件。我想在 Row 组件中显示变量看起来像这样

<Row img='eth' name='Ethereum' price='' volume='' change='' marketCap='' />

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

你的构造函数：

constructor (props) {
    super(props);
    this.state = {ticker: {}, volume: {}}
    this.loadData = this.loadData.bind(this);
  }

为了获取数据，您需要始终使用生命周期组件，如 componentDidMount 或 componentWillMount，因此：

componentDidMount(){
   this.loadData()
}

然后在您的状态下，您将拥有数据。

在您的 render 方法中，将其作为道具传递给 Table 组件：

render(){
   return(
      <Table volume={this.state.volume} ticker={this.state.ticker} />
   )
}

然后从Table 组件将其作为道具传递给Row 组件，因此：

render(){
   return(
     <Row img='eth' name='Ethereum' price='' volume={this.props.volume} change='' marketCap='' />
   )
}

如果您有对象数组，例如：

this.state = {
    volume: [ {name: "One", size: 1 }, {name: "Two", size: 2 }, ..... ]
}

您需要遍历数组并显示每个对象的 Row 组件。

因此，您的Table 组件应如下所示：

render(){
   return (
       <div>{this.props.volume.map(vol => <Row img='eth' name='Ethereum' price='' volume={vol} change='' marketCap='' />)  }</div>
   ) 
}

【讨论】：

谢谢！我们现在将数据处理成一个数组，以便我们可以映射它们。

【解决方案2】：

如果您在 componentDidMount 中进行 ajax 调用，那么 React 将在状态更改时重新渲染 (https://facebook.github.io/react/docs/react-component.html#componentdidmount)。但是你仍然需要预料到 volume 和 ticker 属性将是空的，直到请求解决并且 React 重新渲染。

【讨论】：

是的，我猜这正是发生的事情。提取完成后如何渲染数据？
从componentDidMount 致电loadData。 React 将在状态更改时重新渲染。
如何将状态传递到子组件中？
你的做法：<Table volume={this.state.volume} ticker={this.state.ticker} />
哦，不过我还有一个 Row 组件需要使用 Table 组件内部的状态。那就是无法访问数据