时间戳

首页 > 解决方案 > 获取无法读取未定义的属性映射，尽管项目状态是用数据设置的

reactjs - 获取无法读取未定义的属性映射，尽管项目状态是用数据设置的

问题描述

所以我正在尝试使用 react 和 express 构建一个购物车。后端工作正常。我正在使用邮递员来测试我的端点，它给了我正确的响应。但是，导致问题的是反应前端。我正在尝试在已设置为服务器响应map的数组上使用函数，但它给了我一个错误：items

TypeError：无法读取未定义的属性“地图”

这是我的代码：

购物车.js

import React, { Component } from "react";
import axios from "axios";
import CartItem from "./cart1-item.component.js";
import "bootstrap/dist/css/bootstrap.min.css";
import { throws } from "assert";

export default class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }
  componentDidMount() {
    axios
      .get("http://localhost:4000/cart/")
      .then(response => {
        this.setState({ items: response.data });
      })
      .catch(function(err) {
        console.log(err);
      });
  }

  checkItems() {
    return this.state.items.items.map((currItem, i) => {
      return <CartItem book={currItem} key={i}></CartItem>;
    });
  }

  Calculate = item => {
    return item.qty * item.price;
  };

  render() {
    return (
      <div className="container">
        <div className="row">{this.checkItems()}</div>
      </div>
    );
  }
}

CartItem.js

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

const CartItem = props =>
  props.items.map(item => {
    return <div>{item.title}</div>;
  });

export default CartItem;

邮递员对“/购物车”的回应

{
    "items": [
        {
            "item": "5dd7668f33c21d811b74f403",
            "title": "Modern PHP",
            "price": 25.65,
            "qty": 1
        }
    ],
    "total": 25.65
}

这也是 server.js 代码我不明白为什么当邮递员给我回复时我的数组是空的，这表明我的端点工作正常。

cartRoutes.route("/").get(function(req, res) {
  var cart = req.session.cart;
  var displayCart = { items: [], total: 0 };
  var total = 0;

  for (var item in cart) {
    displayCart.items.push(cart[item]);
    total += cart[item].qty * cart[item].price;
  }
  displayCart.total = total;

  return res.json(displayCart);
});

cartRoutes.route("/:id").post(function(req, res) {
  req.session.cart = req.session.cart || {};
  var cart = req.session.cart;
  let id = req.params.id;
  Book.findById(id, function(err, book) {
    if (err) {
      console.log(err);
    }
    if (cart[id]) {
      cart[id].qty++;
    } else {
      cart[id] = {
        item: book._id,
        title: book.title,
        price: book.price,
        qty: 1
      };
    }
    res.redirect("/cart");
  });
});

我已经花了一天半的时间试图自己解决这个问题。任何帮助将不胜感激。

标签： reactjs

解决方案

由于另一个答案指出您initialState在方法中访问时不正确checkItems，因此您必须保留结构。

我可以建议保持某些结构，在你的情况下看起来这是你的initialState：

this.state = {
      items: []
    };

因此，当您调用您的方法时，checkItems您正在以错误的方式访问它：

 checkItems() {
    return this.state.items.items.map((currItem, i) => {
      return <CartItem book={currItem} key={i}></CartItem>;
    });
  }

据我所知，当您收到您的回复时，您正在修改您的initialState结构。

为了解决这个问题，我建议你做这个小改动（只需将 更改response.data为response.data.items）：

 componentDidMount() {
    axios
      .get("http://localhost:4000/cart/")
      .then(response => {
        this.setState({ items: response.data.items });
      })
      .catch(function(err) {
        console.log(err);
      });
  }

以及方法checkItems：

checkItems() {
    return this.state.items.map((currItem, i) => {
      return <CartItem book={currItem} key={i}></CartItem>;
    });
  }

推荐阅读