为什么我在 React 中的 map 函数给我一个错误？ （...不是函数）

Question

我正在尝试将一个组件（App.js）的道具传递给另一个（list.js）。 我不断收到错误消息，指出我的 map 函数不是 list.js 中的函数。 我正在使用 map 遍历对象数组并从键中获取值。 父组件 App.js 工作并显示来自其地图功能的元素列表。 在 App.js 中，我在 List 组件中创建了一个名为“card”的道具，它应该包含我的 STORE 文件中第二个对象数组的值。 我在这里做错了什么？ 在浏览器的组件选项卡中，我可以看到从 console.log 列出的对象数组。 App.js 中的 prop 'store' 包含来自我的 STORE.js 文件的数据。

应用程序.js：

import React from "react";
import List from "./list";
import "./app.css";

function App(props) {
  return (
    <main className="App">
      <header className="App-header">
        <h1>Trelloyes!</h1>
      </header>
      {props.store.lists.map((list) => {
        return (
          <List
            key={list.id}
            header={list.header}
            card={props.store.allCards}
          />
        );
      })}
    </main>
  );
}

export default App;

列表.js：

import React from "react";
import Card from "./card";

function List(props) {
  console.log(props.card);
  return (
    <div className="App-list">
      <section className="List">
        <header className="List-header">
          <h2>{props.header}</h2>
          <div className="List-cards">
            {props.card.map((item) => {
              return (
                <Card id={item.id} title={item.title} content={item.content} />
              );
            })}
          </div>
        </header>
      </section>
    </div>
  );
}

export default List;

商店.js：

const STORE = {
  lists: [
    {
      id: "1",
      header: "First list",
      cardIds: ["a", "b", "e", "f", "g", "j", "l", "m"],
    },
    {
      id: "2",
      header: "Second list",
      cardIds: ["b", "c", "d", "f", "h", "i", "k"],
    },
    {
      id: "3",
      header: "Third list",
      cardIds: [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
      ],
    },
    {
      id: "4",
      header: "Fourth list",
      cardIds: ["l", "m"],
    },
  ],
  allCards: {
    a: { id: "a", title: "First card", content: "lorem ipsum" },
    b: { id: "b", title: "Second card", content: "lorem ipsum" },
    c: { id: "c", title: "Third card", content: "lorem ipsum" },
    d: { id: "d", title: "Fourth card", content: "lorem ipsum" },
    e: { id: "e", title: "Fifth card", content: "lorem ipsum" },
    f: { id: "f", title: "Sixth card", content: "lorem ipsum" },
    g: { id: "g", title: "Seventh card", content: "lorem ipsum" },
    h: { id: "h", title: "Eighth card", content: "lorem ipsum" },
    i: { id: "i", title: "Ninth card", content: "lorem ipsum" },
    j: { id: "j", title: "Tenth card", content: "lorem ipsum" },
    k: { id: "k", title: "Eleventh card", content: "lorem ipsum" },
    l: { id: "l", title: "Twelfth card", content: "lorem ipsum" },
    m: { id: "m", title: "Thirteenth card", content: "lorem ipsum" },
  },
};

export default STORE;

Answer 1

也许 App.js 的 props 没有 store。 你有没有从 App.js 的父级传递商店数据？

或者试试这个：

 import React from "react"; import List from "./list"; import "./app.css"; import STORE from "[path to your STORE.js]" function App(props) { return ( <main className="App"> <header className="App-header"> <h1>Trelloyes!</h1> </header> {STORE.lists.map((list) => { return ( <List key={list.id} header={list.header} card={props.store.allCards} /> ); })} </main> ); } export default App;

Answer 2

您必须将卡片对象转换为数组才能使用可用于数组的 map 函数。

为您的 Card 组件尝试以下操作：

import React from "react";

function Card(props) {
   return (
       <div key={props.id}>
           <h1>{props.title}</h1>
           <p>{props.content}</p>
       </div>
   )
}

function List(props) {
  console.log(Array.isArray(props.card) ? "true": "false");
  return (
    <div className="App-list">
      <section className="List">
        <header className="List-header">
          <h2>{props.header}</h2>
          <div className="List-cards">
            {Object.entries(props.card).map((item) => {
                console.log('item', item);
              return (
                <Card key={item[1].id} id={item[1].id} title={item[1].title} content={item[1].content} />
              );
            })}
          </div>
        </header>
      </section>
    </div>
  );
}


export default List;

参考：

JavaScript 教程网站。 在 JavaScript 中将对象转换为数组。 https://www.javascripttutorial.net/object/convert-an-object-to-an-array-in-javascript/ 。 （2020 年 11 月 22 日访问）

Answer 3

也许你的地图在加载之前工作，所以它可能会发生错误，所以请检查那些

props && props.card && props.card.map...

props && props.store && props.store.lists && props.store.lists.map...