反応コンポーネントのテスト - TypeError：data.mapは関数ではありません

Question

私は、オブジェクトの配列をとり、それらをビュー内の別の反応コンポーネントにマッピングする反応コンポーネントを持っています。

TypeError: data.map is not a function

ここで私が書いたテストがあります：それは、このエラーを与えるとして、それをテストしながら 私は、ハード運を持っています。私はそれが動作させるべきだと思うデータの小道具を渡すことに注意してください？

content.test.jsここ

import React from 'react'; 
import { shallow, mount } from 'enzyme'; 
import { expect } from 'chai'; 

import Content from '../components/Content.jsx'; 

describe('<Content />',() => { 
    const data = { 
    created: '2017-02-21T09:50:21.441815Z', 
    duration: 1575, 
    final_script: 'some script', 
    language: 'en-GB', 
    rating: 2, 
    url: 'some url', 
    }; 
    it('renders without exploding',() => { 
    mount(<Content data={ data } />); 
    }); 
}); 

とは、コンポーネント自体

content.jsxあります

function Content(props) { 
    const { data } = props; 
    return (
    <div className='content_container'> 
     { 
     data.map((content, index) => <AudioBox data={ content } key={ 
index } />) 
     } 
    </div> 
); 
} 

Content.propTypes = { 
    data: React.PropTypes.arrayOf(React.PropTypes.object), 
}; 

export default Content; 

、ここでこのコンテンツのコンポーネントを呼び出すコンポーネントです

home.jsx

class Home extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     content: null, 
    }; 
    this.logout = this.logout.bind(this); 
    } 

    componentDidMount() { 
    const token = localStorage.getItem('i2x_token'); 
    const requestURL = API_CONTENT; 
    const requestObj = { 
     method: 'GET', 
     headers: new Headers({ 
     Authorization: `JWT ${token}`, 
     }), 
    }; 
    request(requestURL, requestObj).then((reply) => { 
     if (reply.results.length > 0) { 
     this.setState({ content: reply.results }); 
     } else { 
     console.log('no reply from API'); 
     } 
    }); 
    } 

    logout() { 
    localStorage.removeItem('i2x_token'); 
    browserHistory.push('/'); 
    } 

    render() { 
    const data = this.state.content; 
    return (
     <div className='container'> 
     <Header logout={ this.logout } /> 
     { data !== null && 
     <Content data={ this.state.content } /> 
     } 
     </div> 
    ); 
    } 
} 

export default Home; 

はここで間違って何？

Answer 1

あなたが設定しているdataがarrayではないと思うので、エラーが発生しています。

let data = {}; 
 

 
data.map(el => console.log(el))

データが配列なければならないことを、あなたはこのように、Array.isArrayによってmapを使用する前に、また、チェックを入れることができていることを確認してください：

この

チェック

Array.isArray(data) && data.map((content, index) => <AudioBox data={content} key={index} /> 

これを試してみてください：

は、このようにデータを定義します。

const data = [ 
    { 
     created: '2017-02-21T09:50:21.441815Z', 
     duration: 1575, 
     final_script: 'some script', 
     language: 'en-GB', 
     rating: 2, 
     url: 'some url', 
    } 
];