in der Lage, nicht über Stützen geschickt in ein Array verwenden

Question

Im über Stützen an eine Komponente in einer Anordnung zu senden, aber ich kann Karte auf dem Array. Er sagt, dass

.map keine Funktion ist

Mein Code:

const AuthorList = (authors) => { 
return(
    <table className="table"> 
     <thead> 
      <tr>Firstname</tr> 
      <tr>Lastname</tr> 
     </thead> 
     <tbody> 
      {authors.map(author => 
       <AuthorListRow key={author.id} author={author} /> 
      )} 
     </tbody> 
    </table> 
); 
}; 

Dies ist, was das Chrome Entwickler-Tool Reaktion wie folgt aussieht:

Answer 1

Problem, wenn Sie alle Daten von Eltern auf das Kind übergeben, um es durch Requisiten vergangen, und Sie brauchen, um die Requisiten in Kindkomponente zu empfangen und die spezifischen Werte zuzugreifen, schreiben Sie es wie folgt aus:

const AuthorList = (props) => { 
return(
    <table className="table"> 
     <thead> 
      <tr>Firstname</tr> 
      <tr>Lastname</tr> 
     </thead> 
     <tbody> 
      {props.authors.map(author => 
       <AuthorListRow key={author.id} author={author} /> 
      )} 
     </tbody> 
    </table> 
); 
}; 

oder

const AuthorList = ({authors}) => { 
    return(
     <table className="table"> 
      <thead> 
       <tr>Firstname</tr> 
       <tr>Lastname</tr> 
      </thead> 
      <tbody> 
       {authors.map(author => 
        <AuthorListRow key={author.id} author={author} /> 
       )} 
      </tbody> 
     </table> 
    ); 
}; 

Grund, warum 2. man arbeitet: weil Requisiten ein Objekt ist, wenn Sie schreiben {authors} bedeutet, dass Sie nur authors Wert von Objekt props erhalten. In diesem Fall müssen Sie nicht props.authors schreiben.

prüfen dieses Beispiel:

obj = {a:1,b:2,c:3} 
 
let {a} = obj; 
 
console.log(a);

Answer 2

Props werden als Objekt übergeben, also jetzt authors fungiert als Alias ​​für props. Der Zugriff auf die Eigenschaft authors unter props sollte so lange funktionieren, wie diese Prop mit einem Array deklariert wird.

const AuthorList = (props) => { 
    return(
    // .. 
      {props.authors.map(author => 
       <AuthorListRow key={author.id} author={author} /> 
      )} 
    // .. 
); 
};