reactjs - 反应不渲染，空道具对象

问题描述

尝试学习反应，遵循教程。我很难从我的 API 获取数据（使用 whatwg-fetch 的 mongodb）并渲染项目。数据库正在运行，反应没有错误。开发人员工具报告“道具对象为空”，做了一些研究并缩小了范围到反应的异步性质。显然，它是在数据进入之前渲染。但是，我已经实现了一个承诺，但结果没有改变。任何帮助将不胜感激。

我已经添加了一个承诺。

// App.js file
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Product from "../components/product/product"
import HttpService from "../services/http-service";

const http = new HttpService();

class App extends Component {   
  constructor(props) {
    super(props);
    this.state = {
      products: []
    }

    // Bind functions
    this.loadData = this.loadData.bind(this);
    this.productList = this.productList.bind(this);

    this.loadData()
   };

   loadData = () => { 
     let self = this;
     http.getProducts().then(data => {
     self.setState({products: data})
       }, err => {

      });
    }

    productList = () => {

  const list = this.state.products.map((product) => 

  <div className="inItems" key={product._id}>

  <Product title={product.title} price={product.price} imgUrl= 
    {product.imgUrl} />
    </div>
   );
  console.log(list)
  return (list)
}



 render() {

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Welcome 
        </p>
        <div className="container App-main">
           <div className="items">
            <h1>List Of Products</h1>
            {this.productList()}

          </div>
        </div>
      </header>
    </div>
   );
  }
}

export default App;

// service.js 文件

import "whatwg-fetch";

class HttpService {
    getProducts = () => {
        let promise = new Promise((resolve, reject) => {

            fetch("http://localhost:7500/product-list", {mode: "no-cors",  
         credentials: 'include' })
             .then(res => {

                resolve(res.json())
            }).catch(err => {
                if (err) throw err;
                reject(err)
            })
        });
        return promise;
    }
}

export default HttpService;

期望项目显示在屏幕上。控制台中没有任何显示，也没有错误。

标签： reactjs

reactjs - 反应不渲染，空道具对象

问题描述

解决方案

推荐阅读