使用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

首先,我会说你做错了.

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

您应该在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>
    );
  }

}

希望它会有所帮助