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

我知道这不对，但我无法弄清楚为什么？至少我试图将我的数据安装到我的浏览器控制台...最终我要做的就是显示数据中的项目（数据是一个数组）作为我的列表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)

在React中导入和呈现承诺

1 个答案: