使用带有 HTTP 请求的 React Props

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 的数据作为其状态。

当它初始化数据时为空，一旦组件挂载，它将进行 api 调用，一旦调用完成并返回结果，它将更新自己的状态，这将导致重新触发渲染方法。理想情况下，您会解析响应并将其正确放入 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