javascript - 如何映射每个对象值都有唯一 id 的对象并将这些值返回到 React 组件

Question

我正在开发一个 redux 项目，我想检索存储在 API 服务器中的值。我想将来自 API 的数据存储在我的 redux 存储中，然后检索值并将其显示在我的 React 组件中。数据API 服务器中的数据以对象的形式存在，但每个值都有一个唯一的 id。因此，在我的例子中，数据是帖子列表。因此，每个帖子都有一个唯一的 id 并具有时间戳等所有其他详细信息、帖子标题、帖子作者等。这是帖子 API 中的默认数据的样子:

const defaultData = {
  "8xf0y6ziyjabvozdd253nd": {
    id: '8xf0y6ziyjabvozdd253nd',
    timestamp: 1467166872634,
    title: 'Udacity is the best place to learn React',
    body: 'Everyone says so after all.',
    author: 'thingtwo',
    category: 'react',
    voteScore: 6,
    deleted: false,
    commentCount: 2
  },
  "6ni6ok3ym7mf1p33lnez": {
    id: '6ni6ok3ym7mf1p33lnez',
    timestamp: 1468479767190,
    title: 'Learn Redux in 10 minutes!',
    body: 'Just kidding. It takes more than 10 minutes to learn technology.',
    author: 'thingone',
    category: 'redux',
    voteScore: -5,
    deleted: false,
    commentCount: 0
  }
}

注意:这里的“id”是一个随机数(例如“8xf0y6ziyjabvozdd253nd”)，它会变成一个整数，即第一个帖子的 ID 为 1，第二个帖子的 ID 为 2。

因此，我可以将 posts API 中的数据存储在我的 redux“Store”中。我将 posts 对象转换为一个数组(因为我们无法映射对象)，因为我想映射这个数组并在我的 React 组件中显示数据。但是，我无法在我的组件中看到数组的结果组件，也许这是因为它在数组中的每个对象之前都有一个 id。这就是我尝试映射数组的方式，我没有收到任何错误，但我没有看到组件中对象的结果。我的组件文件看起来像这样:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions';
import _ from 'lodash';

class PostsIndex extends Component {
  componentDidMount() {
    this.props.dispatch(fetchPosts())
    .then(() => {
      this.setState({
        loading : false
      });
    //  console.log(this.props.posts.posts[0])
    })
  }

  render() {
//  console.log(this.props.posts.posts)   
  const obj = this.props.posts.posts;
  let arr;
  if (obj) {
     arr = Object.values(obj); //Converting an Object into an array
  }
  console.log(arr);         //returns the converted array from an object

    return(
      <div>
              {
                arr               ?
                <div>
                { arr.map(post =>
                   {
                      <div>
                          {post.title}
                      </div>
                    })
                  }
                </div>
                                  :
                <div>
                  No Data
                </div>
              }
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { posts: state.posts };
}

export default connect(mapStateToProps)(PostsIndex);

当我 console.log 我的状态时，转换后的数组如下所示:

展开后的样子:

我想从上面的数组中检索几乎所有的值。任何人都可以告诉我如何从数组中获取数据并映射数组以显示我的 React 组件中的值吗？

Answer 1

您可以将数据保存为对象，并使用 Object.keys 获取键数组、映射键并使用键访问嵌套对象。如果您不知道数据源的形状，可以使用递归。

这是一个工作 code sandbox example我在其中获取了您的数据源并将其转换为表格来说明如何执行此操作。

这是代码:

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';


const defaultData = {
  "8xf0y6ziyjabvozdd253nd": {
    id: '8xf0y6ziyjabvozdd253nd',
    timestamp: 1467166872634,
    title: 'Udacity is the best place to learn React',
    body: 'Everyone says so after all.',
    author: 'thingtwo',
    category: 'react',
    voteScore: 6,
    deleted: false,
    commentCount: 2
  },
  "6ni6ok3ym7mf1p33lnez": {
    id: '6ni6ok3ym7mf1p33lnez',
    timestamp: 1468479767190,
    title: 'Learn Redux in 10 minutes!',
    body: 'Just kidding. It takes more than 10 minutes to learn technology.',
    author: 'thingone',
    category: 'redux',
    voteScore: -5,
    deleted: false,
    commentCount: 0
  }
}

const TableHeader = ({ fields }) => (
  <thead>
    <tr>
    {
      fields.map( field => <th key={ field }>{ field }</th>)
    }
    </tr>
  </thead>
);

const TableBody = ({ data }) => (
  <tbody>
    {
      Object.keys(data).map(
        datum =>
          <tr>
          {
            Object.keys(data[datum]).map(
              field => <td>{data[datum][field]}</td>
            )
          }
          </tr>
      )
    }
  </tbody>
);

const App = () => (
  <table>
    <TableHeader fields={ Object.keys(defaultData[Object.keys(defaultData)[0]]) } />
    <TableBody data={defaultData} />
  </table>
);

render(<App />, document.getElementById('root'));