对象放入数组然后返回一个组件 - React JS Application

Question

晚会，各位开发者，

我重写了一个 React JS 应用程序，但我只是碰壁了。

我有一个向数据库添加一些数据的表单，特别是 Firebase 谷歌自己的基于云的数据库解决方案。但是，现在我正在尝试获取数据并渲染下面的组件，但我知道该怎么做。

我从 Firebase 收到的回复：

Response From 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.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

Answer 2

您可以使用 Object.values 或 Object.keys 从您的对象中获取一个数组。但是如果您的 persons 对象中没有唯一 ID，则 Object.keys 更合适，因为您需要一个密钥来迭代 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} />
      )
    );
  }