測試反應組件 - 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', 
    } 
];