Question

我正在使用expressjs和reactjs开发一个应用程序。我使用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

您在products的构造函数中将map设置为空字符串，并且字符串没有class Products extends Component { constructor(props) { super(props); this.state = { productInfo: [] }; } // ... }方法。

将默认值改为一个空数组，它将在网络请求完成之前和之后同样有效。

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;

public class DoorsLockManager : MonoBehaviour
{
    public List<HoriDoorManager> Doors = new List<HoriDoorManager>();
}

TypeError：无法读取reactjs中未定义的属性'map'

1 个答案: