javascript - 在 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>
  }
};

我知道这是不对的，但我不明白为什么？至少我正在尝试将我的数据console.log到浏览器的控制台...最终我想要做的是将数据中的项目(数据是一个数组)显示为我的dom中的列表，使用 <li>数组中的每个项目...

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)