Question

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

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

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

问题：

如何将JSON数组映射到ReactJS中的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）我在评论中提到了这一点，但看起来你并不理解.map()应该做什么。 Here's a reference

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

例如，考虑一个名为['Michael', 'Brian', 'John']的数组。我可以在这个数组上调用.map()并使用它来返回一个字符串数组，表示＆＃34; hello＆＃34;列表中的每个人：

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

这可以在React中用来执行类似于＆＃34的逻辑;给定一些名称，返回一些表示这些名称的标记的React组件＆＃34;。

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

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

1 个答案: