使用 React 从 fetch api 中显示数据

Question

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

我正在使用 fetch() API。

我能够从 API 获取数据并将其设置为 'App' 组件状态，但我无法传递到 Table 和 Row 组件我手动创建的。

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 个组件，Table，它也有一个行组件。我想在 Row 组件中显示变量看起来像这样

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

Answer 1

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

Answer 2

你的构造函数：

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 组件将其作为 props 传递给 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>
   ) 
}

使用 React 从 fetch api 中显示数据

displaying data from fetch api using react

jsx

reactjs