TypeError: Невозможно прочитать свойство 'map' из undefined вactjs

Question

Я работаю над приложением с expressjs и реагировать.Я извлек данные из бэкэнда с помощью expressjs, но получаю map is not a function.

import React, { Component } from "react";
import "./products.css";
import Listofproducts from "./listofproducts";
import { Link } from "react-router-dom";

class products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productInfo: ""
    };
  }

  async getProducts() {
    try {
      const data = await fetch("http://localhost:4000/product");
      const jsonData = await data.json();
      this.setState({
        productInfo: jsonData
      });
      console.log(this.state.productInfo);
    } catch (error) {
      console.log(error);
    }
  }
  componentDidMount() {
    this.getProducts();
  }

  render() {
    return (
      <React.Fragment>
        <Listofproducts itemlists={this.state.productInfo} />
      </React.Fragment>
    );
  }
}

export default products;

Вот список компонентов productLists, куда я отправил реквизиты для работы с ним.

import React, { Component } from "react";
import Product from "./products";

class Listofproducts extends Component {
  render() {
    const { itemslist } = this.props;
    console.log(itemslist);
    // console.log is working here i get back the data on the console
    return itemslist.map(list => {
      console.log(list);
    });
  }
}

export default Listofproducts;

Answer 1

Вы устанавливаете productInfo на пустую строку в конструкторе products, и у строк нет метода map.

Вместо этого измените значение по умолчанию на пустой массив, и оно будет работать так же хорошо до и после завершения вашего сетевого запроса.

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

  // ...
}