在React中导入和渲染Promise

Question

更新

import scraper from 'scraper.js';

class Menu extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: ''
    };
}

componentDidMount() {
    scraper.then(data => {this.setState({data});
    });
}

  render() {
    return <ul>{
      this.state.data.length?
        this.state.data.map(function(item, i) {
            return <li key={i}>{item}</li> }) :
        <li>No data</li>
    }</ul>
  }
};

我知道这是不对的，但我不知道为什么？ 至少我要尝试将数据记录到浏览器的控制台中...最终，我要做的是使用<li>数据中的项目（数据是数组）作为列表分散在我的dom中。数组中的每个项目...

Answer 1

import React from 'react';
import ReactDOM from 'react-dom';

let scraper = new Promise(function(resolve, reject) {
  let results = ["Black Forest Ham", "Chicken & Bacon Ranch Melt", "Cold Cut Combo", "Corned Beef Reuben", "Italian B.M.T.®", "Meatball Marinara", "Oven Roasted Chicken", "Roast Beef", "Rotisserie-Style Chicken", "Spicy Italian", "Steak & Cheese", "Subway Club®", "Sweet Onion Chicken Teriyaki", "Classic Tuna", "Turkey Breast", "Turkey Reuben", "Veggie Delite®"];
  resolve(results);
})

class Menu extends React.Component {
  constructor (props) {
    super(props)
    this.state = { data: [] }
  }

  componentDidMount() {
    scraper.then(data => this.setState({data}));
  }

  render() {
    return <ul>{
      this.state.data.length?
        this.state.data.map(d => <li key={d}>{d}</li>) :
        <li>No data</li>
    }</ul>
  }
};

ReactDOM.render(<Menu />, document.body)