Question

我正在尝试为收到的每个音符绘制一张地图。因此，我有一个从firebase获取数据的容器。

db.collection("notes")
      .where("author.email", "==", this.props.authorEmail)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(note => {
          this.setState({ isLoading: false, notes: note.data() });
        });
        //this.setState({ isLoading: false, notes: querySnapshot });
      })
      .catch(error => {
        alert("An error was happend :" + error);
      });

它在componentDidMount上。但是，当我尝试映射该数据以为每个注释呈现一个组件时，我得到了错误。 props.notes.map不是函数

查看使用props.notes.map

的组件

const MyNotes = props => {
  return (
    <div id="my-notes" className="marged-content">
      <h2>I'm your notes</h2>
      <div id="notes" className="p-grid">
        {props.notes.map(note => {
          return <NoteComponent note={note} />;
        })}
      </div>
    </div>
  );
};

这就是我在MyNotes组件中获得的数据。

Object
    notes:
    author: {avatar: "https://firebasestorage.googleapis.com/v0/b/cardon…=media&token=36760a94-84f7-4247-9c22-9d861150e921", email: "jonatanpc.2014@gmail.com", name: "Diego Cardona"}
    content: "<p>sxdd</p>"
    private: false
    title: "A"

我的Firebase存储器中的每个笔记都有一个对象。

Answer 1

我想问题是，您的状态（注释）实际上不是数组，而是对象。

db.collection("notes")
.where("author.email", "==", this.props.authorEmail)
      .get()
      .then(querySnapshot => {
        const notes = [];
        querySnapshot.forEach(note => {
          notes.push(note.data());
        });
        this.setState({ isLoading: false, notes });
      })
      .catch(error => {
        alert("An error was happend :" + error);
      });

为了从数据库查询中获取一个数组。

为什么props.notes.map不是函数？ React和Firebase

1 个答案: