React：如何将数据作为道具从2个不同的API传递到单个组件

Question

我有一个页面（index.js），其中包含组件（slider.js）。 在index.js上，我使用了2个单独的API。 如果我将数据从第一个API发送到1个组件，并将数据从第二个API发送到另一个组件，则一切正常。

但是，我希望一个组件可以从第一个API接收一些值以及从第二个API接收一些值。

export default class extends React.Component {
  static async getInitialProps() {
    const apiUrl = 'https://api-1.com'
    const res = await fetch(apiUrl)
    const data = await res.json()

    const apiUrl2 = 'http://api2.com'
    const params2 = 'featured'
    const res2 = await fetch(apiUrl2)
    const data2 = await res2.json()

    return { data, data2 }
  }

  componentDidMount() {
    //logPageView()
  }

  render() {
    return (
        <div id='slider'>

          {this.props.data.map(function (post, i) {
 return (
              <Slider
                api1postSlug={post.slug}
                //api2category={post2.slug}
              />
            )
})}
</div>

}

如何将data2中的道具与{this.props.data.map(function (post, i) {

Answer 1

假设API 2具有相同的数据结构和API 1的行，则可以这样进行：

export default class extends React.Component {
  static async getInitialProps() {
    const apiUrl = 'https://api-1.com'
    const res = await fetch(apiUrl)
    const data = await res.json()

    const apiUrl2 = 'http://api2.com'
    const params2 = 'featured'
    const res2 = await fetch(apiUrl2)
    const data2 = await res2.json()

    return { data, data2 }
  }

  componentDidMount() {
    //logPageView()
  }

  render() {
    return (
      <div id='slider'>
        {this.props.data.map(function (post, i) {
          return (
            <Slider
              api1postSlug={post.slug}
              api2category={this.props.data2[i].category}
            />
          )
        }, this)}
      </div>
    }
  }
}

Answer 2

尝试添加if条件，然后返回如下。

render() {
    if(this.props.data && this.props.data2) {
        return (
            <div id='slider'>
                {this.props.data.map((post, i) => {
                    return (
                        <Slider
                            api1postSlug={post.slug}
                            api2category={this.props.data2[i].category}
                         />
                    )
                }, this)}
             </div>
          )
     } else {
         return (
             <div id='slider'>Loading...</div>
         )
     }
 }