Versuch Karte zu nennen, aber es ist nicht ein Array

Question

Ich habe den folgenden Code in meiner app ...

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> 
    ); 
    } 
} 

Der Fehler, den ich in der App immer bin ist ... TypeError: this.state.tasks.map is not a function, die ich da Aufgaben verstehen ist kein Array, aber ich bin mir nicht sicher warum? Wenn ich in renderTasks eine console.log (this.state.tasks) hinzufüge, wird sie zweimal angezeigt, beim ersten Mal ist es [], beim nächsten Mal ist es {}. Das verstehe ich auch nicht. Hier ist der vollständige Code: https://gist.github.com/marklocklear/e88f75e7e973f67490f6b3034c9eeeff

Vielen Dank im Voraus!

Answer 1

Zuerst im Konstruktor Ihre tasks sind auf [] festgelegt, da zu diesem Zeitpunkt this.props.tasks nicht definiert ist. Wahrscheinlich machen Sie danach eine asynchrone Anfrage an die API und der zurückgegebene Wert ist {}. Wenn props aktualisiert werden, wird Ihr component neu gerendert. Sie müssen Ihren Aufruf an die API aktualisieren und sicherstellen, dass Array zurückgegeben wird. Ich kann nichts mehr ohne Inhalt von base Datei sagen.

Answer 2

Dies war eine ziemlich einfache Lösung. Ich musste nur das Attribut asArray zu compnentWillMount hinzufügen, und es funktionierte.

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