Question

我检索了一个对象，并希望它在HTML列表中呈现，如：

<ul>
 <li>Jon</li>
 <li>Doe</li>
 <li>Max</li>
 <li>Mustermann</li>
</ul>

我的对象看起来像这样：

Object {
  data: Object {
    allColleagues: [Object {
  name: "Jon"
}, Object {
  name: "Doe"
}, Object {
  name: "Max"
}, Object {
  name: "Mustermann"
}]
  }
}

为了兴趣，我使用以下函数来获取它：

const xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.open("POST", "https://api.graph.cool/simple/v1/XXXX");
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.setRequestHeader("Accept", "application/json");
  xhr.onload = function () {
    testFunc();
    console.log(xhr.response);
  }
  xhr.send(JSON.stringify({query: "{ allColleagues { name } }"}));

Answer 1

您只需创建映射allColleagues数据中每个项目的li标签列表。

import React, {
    Component,
} from 'react';

let data = {
    allColleagues: [
        {
            name: "Jon"
        },
        {
            name: "Doe"
        },
        {
            name: "Max"
        },
        {
            name: "Mustermann"
        }
    ]
}


class RenderDataAsList extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <ul>
                {
                    data.allColleagues.map((colleague, index) => {
                        return (
                            <li key={index} >
                                {colleague.name}
                            </li>
                        )
                    })
                }
            </ul>
        );
    }
}

使用ReactJS将对象打印为列表

1 个答案: