Question

为什么我不能将数组作为 props 从一个 js 传递到另一个 js？

2020-12-07

82

reactjs

我有三个 js 文件 App.js 、 PeopleData.js 、 PeopleDetail.js

App.js 是包含所有其他组件（包括 PeopleDetail.js ）的主应用程序 PeopleData.js 包含导入到 App.js 的 JSON 数组数据 PeopleDetail.js 是显示来自 PeopleData.js 的数据的组件

但我试图将 JSON 从 App.js 传递到 PeopleDetail.js 作为 props，它会将其更改为对象而不是数组。

这是 App.js

import React from "react";
import PeopleData from "./PeopleData";
import PeopleDetail from "./PeopleDetail";

function App() {
console.log(PeopleData)
  return (
    <div>
          <PeopleDetail props={PeopleData} />
    </div>
  );
}

export default App;

即使我使用 console.log 来确保我传递的 JSON 是一个数组，它最终仍会成为 PeopleDetail.js ，我无法在其上使用地图功能。

这是 PeopleDetail.js

import React from "react";

function PeopleDetail(props) {
  console.log(props);
  const list = props.map((people) => (
    <div key={people.id}>
      <li>
        <h1>{people.name}</h1>
      </li>
    </div>
  ));

  return <div>{list}</div>;
}

export default PeopleDetail;

这是 PeopleDetail.js

const peopleData = [
  {
    name: "Peter",
    id: 1,
  },
  {
    name: "Tom",
    id: 2,
  },
];
export default peopleData;

如能提供任何帮助，我们将不胜感激！！！非常感谢！

Answer 1

您需要从 props 对象中提取 peopleData 。您可以使用如下所示的解构方法，或者只需将您的映射更改为 props.people.map(...) 。我建议您将属性命名为 props 以外的其他名称，这样您就不会与普通的 props 对象混淆。现在您有一个带有 props 数组的 props 对象。

import React from "react";
import PeopleData from "./PeopleData";
import PeopleDetail from "./PeopleDetail";

function App() {
console.log(PeopleData)
  return (
    <div>
          <PeopleDetail people={PeopleData} />
    </div>
  );
}

export default App;

import React from "react";

function PeopleDetail({ people }) {
  console.log(people);
  const list = people.map((person) => (
    <div key={person.id}>
      <li>
        <h1>{person.name}</h1>
      </li>
    </div>
  ));

  return <div>{list}</div>;
}

export default PeopleDetail;