this.props.parentprop.mapは関数ではありません（TypeError）

Question

.map()メソッドを使用して、子コンポーネント（ChildOne）内の親の状態オブジェクトを反復処理して、別の子コンポーネント（ChildTwo ）。

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のために：エラーを見つけることができるChildOne、用

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

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

Answer 1

私はあなたのエラーがChildTwoに実際にあると思いますか？クラスがレンダリングと同じ名前になっていないので、非常に混乱します（TrackListなど）。

あなたが両方同じ名前itemという名前の2つの異なる小道具渡して、このようにそれをレンダリングしている：

<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を使用することを推奨します。