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

Question

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

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

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

问题：

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

这是我尝试过的，首先通过 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>
    );
  }

Answer 1

我在这里看到了一些问题，希望我能够解决所有问题。

1) 我在 cmets 中提到了这一点，但您似乎不明白 .map() 应该做什么。 Here's a reference.

tl;dr：在可迭代对象上调用 .map() 并传递要在每个项目上执行的函数将返回该函数返回值的集合。

例如，考虑一个有几个名称['Michael', 'Brian', 'John'] 的数组。我可以在这个数组上调用.map() 并使用它返回一个字符串数组，向列表中的每个人说“你好”：

var names = ['Michael', 'Brian', 'John'];
var sayHello = names.map(function (name) {
    return 'Hello, ' + name;
});
console.log(sayHello); // ['Hello, Michael', 'Hello, Brian', 'Hello, John'];

这可以在 React 中用于执行类似于“给定一些名称，返回一些代表这些名称的标记的 React 组件”的逻辑。

2) 您链接的 JSON 数据是一个对象数组，每个对象都有自己的 name 属性。看起来您正在使用 jQuery 来获取它并将结果保存在 this.state.data 中。这意味着this.state.data 是一个数组。所以如果你尝试做this.state.data.names.map()，它会失败，因为this.state.data.names 是未定义的。你会想改用this.state.data.map()。

3) 在 JSX 内部，您可以执行 JavaScript 表达式/语句，只要它们位于花括号 {} 内。看起来你没有这样做。

4) 你对.map() 的呼叫是在this.props.data，我想你想改为this.state.data。

这是我看到的一切，在它开始按预期工作之前应该修复或改进。如果是我，我会将您的 .map() 调用保留在您尝试渲染到的 <List /> 中：

<List selectable={true} selected={0}>       
    {
        this.state.data.map(function (person) {
            return (
                <ListItem justify="between">
                    <span>{person.name}</span>
                </ListItem>
            );
        })
    }
</List>

或者也许更简洁的解决方案是将这个逻辑提取到它自己的辅助函数中。但这并不是必须的。

编辑：Here's a demo