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

Question

这是我的数据“personell.js”

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

而且我想通过我的 App 功能渲染它

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

你的useState是错误的！设置为：

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

应该可以。

Answer 2

您正在导出一个数组，然后将该数组放入另一个数组中：

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

要使其正常工作，您只需要做

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

正如评论中指出的那样，您的命名确实与 person 和 setPerson 的意思有点混淆，意思是单数，但您提供的是一组人。

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

How to render React Objects with useState from a separat file?

javascript

arrays

object

reactjs

use-state