Как визуализировать объекты React с useState из отдельного файла? - PullRequest
Новая
       58

Как визуализировать объекты React с useState из отдельного файла?

0 голосов
/ 06 августа 2020

это мои данные "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 отлично работает

Или, может быть, есть более эффективный способ сделать это?

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Вы экспортируете массив, а затем помещаете этот массив в другой массив: 

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

Чтобы заставить его работать, вам просто нужно сделать 

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

Как указано в комментарии также, ваше название немного сбивает с толку с person и setPerson, означающими единственное число, но вы предоставляете коллекцию людей.

1 голос
/ 06 августа 2020

Ваше useState неверно! Установите его как: 

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

он должен работать.

...