javascript - TypeError：a.map 不是函数

问题描述

我将这个 React JS 应用程序部署到 Heroku。我在让我的路线在已部署的应用程序上运行时遇到了很多麻烦，当我在本地主机上运行它时，它们运行良好。我似乎已经解决了我的路由问题，但现在我遇到了一些我无法弄清楚的错误。我进行了很多搜索，但似乎找不到对我的特定问题有帮助的东西。

我的主页加载完毕，顶部有一个导航栏，上面有明显的点击选项。当我单击“材料”选项时，它应该加载“材料”页面，在该页面的左侧它有一个表格可以输入新材料。页面右侧从位于 MongoDB 云 Atlas 的 MongoDB 数据库中加载所有现有材料。它没有加载页面，而是立即加载它，然后页面变为空白，我收到以下错误：

react-dom.production.min.js:209 TypeError: l.map is not a function
    at L (Tickets.js:159)
    at Ga (react-dom.production.min.js:153)
    at Lo (react-dom.production.min.js:175)
    at yl (react-dom.production.min.js:263)
    at su (react-dom.production.min.js:246)
    at lu (react-dom.production.min.js:246)
    at Jl (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:19)
    at Wi (react-dom.production.min.js:122)
el @ react-dom.production.min.js:209
n.callback @ react-dom.production.min.js:226
fa @ react-dom.production.min.js:131
al @ react-dom.production.min.js:212
pu @ react-dom.production.min.js:255
t.unstable_runWithPriority @ scheduler.production.min.js:19
Wi @ react-dom.production.min.js:122
du @ react-dom.production.min.js:248
Jl @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Wi @ react-dom.production.min.js:122
Bi @ react-dom.production.min.js:123
$i @ react-dom.production.min.js:122
Ql @ react-dom.production.min.js:230
mo @ react-dom.production.min.js:163
(anonymous) @ Tickets.js:30
Promise.then (async)
T @ Tickets.js:29
(anonymous) @ Tickets.js:23
il @ react-dom.production.min.js:211
yu @ react-dom.production.min.js:257
t.unstable_runWithPriority @ scheduler.production.min.js:19
Wi @ react-dom.production.min.js:122
mu @ react-dom.production.min.js:257
(anonymous) @ react-dom.production.min.js:256
U @ scheduler.production.min.js:17
k.port1.onmessage @ scheduler.production.min.js:14
Tickets.js:32 TypeError: l.map is not a function
    at L (Tickets.js:159)
    at Ga (react-dom.production.min.js:153)
    at Lo (react-dom.production.min.js:175)
    at yl (react-dom.production.min.js:263)
    at su (react-dom.production.min.js:246)
    at lu (react-dom.production.min.js:246)
    at Jl (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:19)
    at Wi (react-dom.production.min.js:122)
Tickets:1 Unchecked runtime.lastError: The message port closed before a response was received.

这是我的材料页面的代码：

import React, { useState, useEffect } from "react";
import DeleteBtn from "../DeleteBtn";
import Jumbotron from "../Jumbotron";
import API from "../../utils/API";
import { Link } from "react-router-dom";
import { Col, Row, Container } from "../Grid";
import { List, ListItem } from "../List";
import { Input, FormBtn } from "../Form";

function Materials() {
  //  Setting initial state
  const [materials, setMaterials] = useState([])
  const [formObject, setFormObject] = useState({})

  // Load all Materials and store them with setMaterial
  useEffect(() => {
    loadMaterials()
  }, [])

  // Loads all materials and sets them to materials
  function loadMaterials() {
    API.getMaterials()
    .then(res =>
      setMaterials(res.data)
    )
    .catch(err => console.log(err));
  };

  // Deletes a Material from the database with a fiven id, then reloads Materials
  function deleteMaterial(id) {
    API.deleteMaterial(id)
      .then(res => loadMaterials())
      .catch(err => console.log(err));
  }

  // Handles updating component state when user types into the input field
  function handleInputChange(event) {
    const { name, value } = event.target;
    setFormObject({...formObject, [name]: value})
  };

  // When the form is submitted, use the API.saveMaterial method to save the data
  // Then reload Materials from the database
  function hadndleFormSubmit(event) {
    event.preventDefault();
    if (formObject.name) {
      API.saveMaterial({
        name: formObject.name,
        price: formObject.price,
        notes: formObject.notes
      })
        .then(res => loadMaterials())
        .catch(err => console.log(err));
        document.getElementById("matFrm").reset();
        setFormObject({}) 
    }
  };

    return (
      <Container fluid>
        <Row>
          <Col size="md-6">
            <Jumbotron>
              <h1>Add Materials</h1>
            </Jumbotron>
            <form id="matFrm">
              <Input 
                onChange={handleInputChange} 
                name="name" 
                placeholder="Material Name (Required)"
              />
              <Input
                onChange={handleInputChange}
                name="price"
                placeholder="Price"
              />
              <Input
                onChange={handleInputChange}
                name="notes"
                placeholder="Notes"
              />
              <FormBtn
                disabled={!(formObject.name)}
                onClick={hadndleFormSubmit}
                >
                  Submit Material
                </FormBtn>
            </form>
          </Col>
          <Col size="md-6 sm-2">
            <Jumbotron>
              <h1>Materials</h1>
            </Jumbotron>
              {materials.length ? (
                <List>
                  {materials.map(materials => (      
                    <ListItem key={materials._id}>
                      <Link to={"/Materials/" + materials._id}>
                        <strong>
                          {materials.name}
                        </strong>
                      </Link>
                      <DeleteBtn onClick={() => deleteMaterial(materials._id)} />
                    </ListItem>
                  ))}
                </List>
              ) : (      
                <h3>No Results to Display</h3>
              )}            
            </Col>
          </Row>
        </Container>
      );
    }

export default Materials;

显然，我在 React 和一般编码方面仍然很新，如果有任何其他信息会有所帮助，请告诉我。我非常感谢我能得到的任何帮助。

谢谢，

弥敦道

标签： javascriptnode.jsreactjsmongodbexpress

javascript - TypeError：a.map 不是函数

问题描述

解决方案

推荐阅读