我正在从http://jsonplaceholder.typicode.com/users请求一个示例 JSON 数组，并在 ReactJS 项目中使用该数组的名称值创建一个项目列表。

该列表是一个Grommet列表，我使用该.map函数将 Web 服务数据映射到每个列表项。

但是当代码呈现时，而不是使用 Web 服务创建名称列表。它将只创建一个列表项，使得调用.map和rows.push。

问题：

如何在 ReactJS 中将 JSON 数组映射到列表？

这是我尝试过的，首先通过 AJAX GET 获取 Web 服务，然后调用 .map 将该数据映射到列表：

loadNameData() {
    $.ajax({
      url: 'http://jsonplaceholder.typicode.com/users',
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    });
  }

  getInitialState(){
    return {
       data: {
          names: [] 
       }
    };
  }

  componentDidMount() {
    this.loadAssetData();
  }

  render() {
      let layerNode;
      var rows = [];

      layerNode = (
        <Layer flush={true} closer={true} onClose={() => this._onCloseLayer()} align='right'>
          <Box pad='medium' colorIndex='grey-3'>
            <Heading>Filter Options</Heading>
            <Label>Names</Label>
                this.props.data.names.map(function(name) {
                    rows.push(<ListItem justify="between">)
                    rows.push(<span>)
                    rows.push({name})
                    rows.push(</span>)
                    rows.push(</ListItem>)
                }
                <List selectable={true} selected={0}>       
                    {rows}
                </List>           
          </Box>
        </Layer>
      );  

    return (
      <Section pad="small" full="vertical" flex={true}>         
                {layerNode}             
      </Section>
    );
  }