this.props.parentprop.map不是函數（TypeError）

Question

我在使用.map()方法迭代父組件的狀態對象（ChildOne）以創建另一個子組件的多個實例時遇到困難（ChildTwo ）。

class Parent extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     listItems: [] // this list 
    } 
    render() { 
    return (
     <div> 
     <ChildTwo listItems={this.state.listItems} /> 
     </div> 
    } 

爲ChildOne，在那裏可以找到錯誤：

class TrackList extends React.Component { 
    render() { 
     console.log(this.props.items); // returns the array in parent state with no problem 
     return (
      <div> 
       {this.props.items.map(item => { // this.props.items.map is not a function 
        return (
         <ChildTwo item={item} key={item.id} /> 
        )}) 
       } 
      </div> 

最後，對於ChildTwo：

class ChildTwo extends Component { 
    render() (
    return (
     <div> 
      <ChildOne items={this.props.listItems} /> 
     </div> 

Answer 1

我認爲你的錯誤實際上是ChildTwo？這很令人困惑，因爲你的課程與他們的渲染沒有相同的命名（TrackList等）。

你使其尚且如此，通過兩種不同的道具名稱相同並重命名爲item：

<ChildTwo item={item} item={item.id} /> 

但類定義正在尋找一個名爲道具listItems

class ChildTwo extends Component { 
    render() { 
    // ChildTwo was rendered with props `item` 
    return (
     <div> 
      <ChildOne items={this.props.listItems} /> 
     </div> 

我會建議在錯誤的道具通過時使用prop-types來顯示錯誤。