不能使用通過道具發送的數組

Question

我通過道具發送數組通過道具，但我不能使用陣列上的地圖。它說，

.MAP不是一個函數

我的代碼：

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

這就是Chrome的開發做出反應工具的樣子：

Answer 1

問題是，當你從父母和孩子之間傳遞的任何數據，它打通道具過去了，你需要接受的子組件的道具和訪問的具體數值，它這樣寫：

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

或

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

之所以第二屆一個工作：因爲道具是一個對象，當你寫{authors}這意味着您只收到對象props的authors值。在這種情況下，你不需要寫props.authors。

檢查這個例子：

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

Answer 2

道具將作爲一個對象傳入，所以現在authors正在作爲props的別名。在props上訪問authors屬性應該只要該prop正在使用數組聲明。

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