得到错误＆＃34; .map不是一个功能＆＃34;我无法从mongoDB

Question

我正在使用/学习react和mongo / mongoose。我试图从我的数据库中提取一些数据并将其放在页面上，但我收到了错误：

  

this.state.stories.map不是一个函数。

以下是最相关的代码。显然有更多的文件，但我不完全确定问题究竟是什么以及应该包含多少代码。

＆＃13;

＆＃13;

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

class Home extends Component {
  state = {
    stories: [],
    offset: 0,
    author: "",
    title: "",
    genre: "",
    text: ""

  };

  componentDidMount() {
    this.latestStories(this.state.offset);
  }

  latestStories = offset => {
    API.getLatestStories(offset)
      .then(res =>
        this.setState({ stories: res.data, title: "", author: "", genre: "", text: "" })
      )
      .catch(err => console.log(err));
  };

  handleInputChange = event => {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    });
  };

  handleFormSubmit = event => {
    event.preventDefault();
    if (this.state.title && this.state.author && this.state.genre && this.state.text) {
      API.saveStory({
        title: this.state.title,
        author: this.state.author,
        genre: this.state.genre,
      })
        .then(res => this.latestStories())
        .catch(err => console.log(err));
    }
  };

  render() {
    return (
      <Container fluid>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newStoryModal">
        NEW STORY
        </button>
        <div class="modal" tabIndex="-1" role="dialog" id="newStoryModal">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form>
                      <Input
                        value={this.state.author}
                        onChange={this.handleInputChange}
                        name="author"
                        placeholder="Author Name"
                      />
                      <Input
                        value={this.state.title}
                        onChange={this.handleInputChange}
                        name="title"
                        placeholder="title here"
                      />
                      <Input
                        value={this.state.genre}
                        onChange={this.handleInputChange}
                        name="genre"
                        placeholder="genre"
                      />
                      <TextArea
                        value={this.state.text}
                        onChange={this.handleInputChange}
                        name="text"
                        placeholder="story here"
                        maxLength= "500"
                        rows= "10"
                      />
                      <FormBtn
                        disabled={!(this.state.author && this.state.title)}
                        onClick={this.handleFormSubmit}
                      >
                        Submit Story
                      </FormBtn>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
        <Row>
          <Col size="md-6">
            <Jumbotron>
              <h1>LATEST STORIES</h1>
            </Jumbotron>
            {this.state.stories.length ? (
              <List>
                {this.state.stories.map(story => (
                  <ListItem key={story._id}>
                    <Link to={"/stories/" + story.id}>
                      <strong>
                        {story.title} by {story.author}
                      </strong>
                    </Link>
                    <DeleteBtn onClick={() => this.deleteBook(story._id)} />
                  </ListItem>
                ))}
              </List>
            ) : (
              <h3>No Results to Display</h3>
            )}
          </Col>
            
          <Col size="md-6 sm-12">
            
          </Col>
        </Row>
      </Container>
    );
  }
}

export default Home;

＆＃13;

＆＃13;

＆＃13; 经过大量的谷歌搜索（小时）后，如果你尝试使用不是数组的函数，通常会出现这种错误。我在console.log中放置了componentDidMount状态，但是我得到了初始的空数组（可能是由于异步调用）。我想也许从API调用中得到了一些未定义的内容，并尝试在查询中添加console.log，但我没有看到res出现在任何地方。

＆＃13;

＆＃13;

  latestStories: function(req, res) {
    console.log(res);
    db.Stories
      .find(req.query)
      .sort({ date: -1 })
      .limit(5)
      .skip(req.params.offset)
      .then(dbModel => res.json(dbModel))
      .catch(err => res.status(422).json(err));
  }

＆＃13;

＆＃13;

＆＃13;

我打开robomongo / robo3T，似乎我不知道如何找到我的数据库，或者它不存在。我正在运行mongo，而且我没有收到与数据库相关的任何错误，但我似乎无法从中得到我想要的内容。我认为也许我的种子没有被使用，虽然我在 package.json 中看到了它。