Question

我试图在React中使用props来显示来自动态REST API的内容。在下面的示例中，我试图从http://api.icndb.com/jokes/random/获取一个显示随机Chuck Norris笑话的数据。不幸的是，我的应用程序返回错误500.

有关于此的任何想法吗？

import React from 'react';
import request from 'request';

const Api = (props) => {
  return <div>
            {request(props.api, (error, response, body) => {
                            if(!error && response.statusCode == 200) {
                                return body;
                            } else {
                                return error;
                            }
                        })
            }
        </div>;
}

const Default = (props) => {
    return ( <Api api="http://api.icndb.com/jokes/random/"/> );
};
export default Default;

Answer 1

你绝对不应该在render方法中进行任何类型的api调用。这样做的理想方式是：

class Api extends React.Component {

  constructor() {
    super();

    this.state = {
      data: null
    }

  }

  componentDidMount() {
    request(this.props.api, (error, response, body) => {
      if(!error && response.statusCode == 200) {
          this.setState({data: body})
      } else {
          return error;
      }
    });
  }

  render() {
    const content = this.state.data ? JSON.stringify(this.state.data) : <h3>Loading...</h3>

   return (
     <div class="content">
       {content}
     </div>
   )
 }
}

所以我们做了什么：

我们将无状态功能组件转换为ES6类组件，该组件将api中的数据作为其状态。

初始化数据时为null，一旦组件安装，它将进行api调用，一旦调用完成并返回结果，它将更新自己的状态，这将导致重新触发render方法。理想情况下，您将解析响应并将其正确放入UI中，但在这种情况下，我们只需将响应转换为字符串并将其呈现到DOM中。

关于componentDidMount的

信息 https://facebook.github.io/react/docs/react-component.html#componentdidmount

关于render()的

信息 https://facebook.github.io/react/docs/react-component.html#render

这是一支正在使用的笔：http://codepen.io/finalfreq/pen/xgqMae

我确实必须使用不同的api库作为你正在使用的request.js没有可用的cdn

使用带有HTTP请求的React Props

1 个答案: