Question

我使用ES6 map函数迭代对象数组并将其更新为<li>列表项。日志正确打印。但是列表项没有显示在UI中。

代码：

renderListItems() {
    var GameScore = Parse.Object.extend("Test");
    var query = new Parse.Query(GameScore);
    query.find({
        success: function (results) {
            console.log("Successfully retrieved " + results.length);
            return results.map((task, i) => {
                console.log("-> " + task.get("name"));
                return (<li key={i}>
                        {task.get("name")}
                    </li>
                );
            });
        },
        error: function (error) {
            console.log("Error: " + error.code + " " + error.message);
        }
    });
}

这是我的渲染方法，我在＆＃39;渲染＆＃39;

中调用此renderListItems方法

 render() {
    return (

            <div>
                <ul>
                    {this.renderListItems()}
                </ul>
            </div>
    );
}

Answer 1

答案很简单：您的renderListItems()方法根本不会返回任何内容。

数据提取逻辑不应该是render方法的一部分。如果希望在装入组件后获取数据，则应将所有逻辑提取到生命周期方法componentDidMount（）中。否则，您必须创建一个按钮，在单击时将调用一个函数来获取数据。

您可以将数据存储在组件状态中，只需对renderListItems（）执行以下操作：

renderListItems() {
  return this.state.results.map((task, i) => {
      console.log("-> " + task.get("name"));
      return (<li key={i}>
              {task.get("name")}
          </li>
      );
  });
}

作为旁注，我不会将数组索引用于每个<li>的关键支柱。你可以谷歌这个。相反，我会使用一些唯一标识符，例如task.id（如果有的话）。

React - 渲染和迭代组件

1 个答案: