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 prop或组件。如果响应处于您的根状态：

  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} />
      )
    );
  }

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

2 个答案: