如何从单独的文件中使用useState渲染React对象

Question

这是我的数据"personell.js"；

export const personell = [
{
name: " Andrew",
},
{
name: " Josh",
},
{
name: "Eric",
},
];

我想通过我的应用程序功能来渲染它

import React, { useState } from "react";
import { personell } from "./Personell";
function App() {
console.log(personell);
const [person, setPerson] = useState([personell]);
const Person = ({ persons }) => <h1 className="persons">{persons.name}</h1>;
return (
<div className="app">
<div className="personell-list">
{person.map((persons, index) => (
<Person key={index} index={index} persons={persons} />
))}
</div>
</div>
);
}
export default App;

这样就不会渲染任何内容，尽管使用console.log可以很好地进行

或者有更有效的方法吗？

Answer 1

导出一个数组，然后将该数组放入另一个数组：

const [person, setPerson] = useState([personell]);

为了让它发挥作用，你只需要做

const [person, setPerson] = useState(personnell);

正如评论中所指出的，您的命名确实有点混淆了person和setPerson的单数含义，但您提供的是一个集合。

Answer 2

您的useState错误！设置为：

const [person, setPerson] = useState(personell);

它应该起作用。