Question

我的应用程序中有以下代码...

componentWillMount(){
    this.ref = base.syncState('/tasks', {
      context: this,
      state: 'tasks'
    });
  }

...
renderTasks() {
      return this.state.tasks.map(name => (
        <Task
            key={name}
            name={name}
            removeTask={this.removeTask}
        />
      ));
    }
        render() {
      return (
        <div className="TaskList">
            <h3>TODO List</h3>
          {this.renderTasks()}
          <TaskInput addTask={this.addTask}/>
        </div>
      );
    }
}

我在应用中遇到的错误是...... 我理解TypeError: this.state.tasks.map is not a function因为任务不是数组，但我不确定为什么？如果我在renderTasks中添加了console.log（this.state.tasks），它会显示两次，第一次是[]，但下次是{}。我也不明白。以下是完整的代码：https://gist.github.com/marklocklear/e88f75e7e973f67490f6b3034c9eeeff

提前致谢！

Answer 1

首先在构造函数中，您的tasks设置为[]，因为此时this.props.tasks未定义。可能在此之后，您正在向API发出异步请求，返回的值为{}。更新props后，您的component会重新呈现。您必须更新对API的调用并确保它返回数组。如果没有base文件的内容，就无法再说些什么。

Answer 2

这是一个非常简单的修复方法。我只需要将asArray属性添加到compnentWillMount并且它可以工作。

componentWillMount(){
    this.ref = base.syncState('/taks', {
      context: this,
      state: 'tasks',
      asArray: true
    });
  }

试图调用地图但不是数组

2 个答案: