使用promises在React中呈现一个简单的列表

Question

我正在尝试从返回promise的服务中呈现一些内容，但我无法弄清楚应该如何在“return”块中返回数据。

返回一些静态数据没有问题，如本例所示。但是，我如何以相同的方式返回注释代码中的数据？

图像显示控制台，您可以在其中查看承诺。

我知道答案可能很简单，但我无法绕过它。

render() {

		const data2 = [
			{title:'item one', id:'000'},
			{title:'item two', id:'001'}
		];
		console.log(data2);

		const data = firebaseCon.content.get('text', { fields: ['id', 'title'] });
		console.log(data);

		var itemList = data2.map(function(item) {
			return <li className="item" key={item.id}>{item.title}</li>;
		});

		return (
			<ul>
				{itemList}
			</ul>
		)
	}

Answer 1

此代码将处理api返回的对象，并将提取移动到componentDidMount。

constructor(props) {
   super(props);
   this.state = {
      data: [],
   }
}
componentDidMount() {
    firebaseCon.content.get('text', { fields: ['id', 'title'] })
      .then((response) => {
          let data = [];
          for (item in response) {
              data.push(response[item]);
          }
          this.setState({ data });
      });
}

render() {
    let itemList = this.state.data.map(function(item) {
        return <li className="item" key={item.id}>{item.title}</li>;
    });
    return (
        <ul>
            {itemList}
        </ul>
    )
}

仔细看看Promises的方法then和catch应该更清楚：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Answer 2

首先，我会说你做错了。

您永远不应该在渲染功能中发出服务器请求。

您应该在componentWillMount()或componentDidMount()中发出服务器请求。

如果您了解async/await概念，那么它对您有所帮助。

你可以查看这个链接..

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

你可以试试这个......

import React, { Component } from 'react';
export default class ListData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  async componentDidMount() {
    const data = await firebaseCon.content.get('text', { fields: ['id', 'title'] });
    this.setState({ data });
  }

  render() {
    const { data } = this.state;
    const itemList = data.map(function(item) {
            return <li className="item" key={item.id}>{item.title}</li>;
        });
    return (
      <div>
        {data.length > 0 &&
           <ul>
             { itemList }
           </ul>
        }
      </div>
    );
  }

}

希望它会有所帮助

Answer 3

你见过这个吗？

https://github.com/axios/axios

基于Promise的HTTP客户端，用于浏览器和node.js.

您可以在本教程中看到它与React一起使用：

https://codeburst.io/building-appointment-scheduler-app-in-react-and-nodejs-f163c4eaab6b

希望能帮助到你。