Объект в массив, а затем вернуть компонент - React JS Application

Question

Вечерние коллеги-разработчики,

Я переписал приложение React JS, но только что попал в кирпичную стену.

У меня есть форма, которая добавляет некоторые данные в базу данных, в частности, Firebase находит собственное решение для облачной базы данных.Тем не менее, сейчас я пытаюсь получить данные и визуализировать компоненты ниже, но я уверен, как это сделать.

Что я получаю от Firebase в ответ:

Ответ от Firebase

В настоящее время я просто регистрирую ответ, чтобы показать, что я получаю ответ, я установил ответ в пустое состояние.При рендеринге он получает ответ от сервера.

Теперь я хочу иметь возможность преобразовывать объекты в массив, который затем может возвращать массив ответов.Затем массив будет зациклен и преобразован в компоненты, которые будут отображаться ниже, как я указал выше.

Может кто-нибудь помочь мне с этой задачей, так как я очень не уверен, как выполнить эту задачу.Я буду признателен за любые ответы на мой вопрос.

Ссылка на Github: https://github.com/AlexMachin1997/React-JS-Contact-Book Что у меня есть:

componentDidMount () {

  axios.get("/contact.json")

  .then(response => {
      this.setState({
          contactsArray: response.data.person
      })
      console.log(this.state.contactsArray)
  })

  //Any Errors The Error State Is Set To True
  .catch (error => {
  console.log(error)
  })

}

Answer 1

Вы можете использовать Object.values ​​или Object.keys, чтобы получить массив из вашего объекта.Но Object.keys больше подходит, если у вас нет уникальных идентификаторов в вашем persons объекте, так как вам понадобится ключ для итерации JSX-реквизита или вашего компонента.Если ответ находится в корневом состоянии:

  render() {
    const obj = this.state;
    return (
        Object.keys( obj ).map( objKey =>
        (
          <div key={objKey}>
              <p>Name: {obj[objKey].persons.name}</p>
              <p>Email: {obj[objKey].persons.email}</p>
              <p>Phone: {obj[objKey].persons.phone}</p>
          </div>
        )
      )
    );
  }

или передайте его другому компоненту:

render() {
    const obj = this.state;
    return (
      Object.keys(obj).map(objKey =>
          <Person obj={obj} objKey={objKey} />
      )
    );
  }

С Object.values ​​это будет немного чище, но вы должны использовать что-то уникальное для вашегоключ.Я выбрал свойство электронной почты, так как электронные письма уникальны.

  render() {
    const obj = this.state;
    return (
      Object.values(obj).map(value =>
        (
          <div key={value.persons.email}>
            <p>Name: {value.persons.name}</p>
            <p>Email: {value.persons.email}</p>
            <p>Phone: {value.persons.phone}</p>
          </div>
        )
      )
    );
  }

или снова с компонентом:

render() {
    const obj = this.state;
    return (
      Object.values(obj).map(value =>
          <Person value={value} />
      )
    );
  }

Answer 2

Для преобразования объекта ответа в массив вы можете использовать Object.keys или Object.values

Object.values(firebaseResponse);

или

Object.keys(firebaseResponse).map((x) => { 
    // additional transformation
    return x;
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys