Question

我是reactjs的新手，我有一个json对象，我想迭代并填充react组件中的列表项。我通过json电话从服务器获得ajax。

我在getData（）方法中的ajax：

  $.ajax(
        {
            type: 'get',
            url: url,
            success: function (data) {
                this.setState({ data: JSON.parse(data) })  //or parse
            }.bind(this)
        },

    );

构造函数：

constructor() {
    super();
    this.state = {
        data: null
    };

    this.getData = this.getData.bind(this);
  }

数据如下所示：

{
    "commentID":25,
    "matchID":43234,
    "commentatorID":12537228724216704,
    "timeM":67,
    "timeRT":null,
    "action":"goal",
    "description":"aaaaaaaa"
},
{
    "commentID":27,
    "matchID":56,
    "commentatorID":12537228724216704,
    "timeM":14,
    "timeRT":null,
    "action":"",
    "description":"fgfafafaaffaafasfasf"
},

我已经尝试过将object字符串化，但是当我尝试遍历string时，当我只想列出“description”和“timeM”时，它有很多工作要做。

我应该在json方法中运行render对象并创建列表项还是有其他方法可以执行此操作？我正在寻找一个如何做到这一点的好例子。谢谢！

Answer 1

要了解哪个反应组件生命周期事件应该 setState ，您可以参考 https://facebook.github.io/react/docs/react-component.html

创建新数组，你可以简单地

this.setState({
    data: resoponseArray.map(item => {description: item.description, timeM: item.timeM})
})

修改

并为您呈现数据

render () {
    return(
        <div>
            <ul>
                {
                    this.state.data.map((item, key) => {
                        return <li key={key}>{item.timeM} {item.description}</li>
                    })
                }
            </ul>
        </div>
    )
}

在React组件中填充json中的列表项

1 个答案: