我有一个react组件,它接受一组对象并将它们映射到视图中的另一个反应组件。 我在测试它时运气不好,因为它给出了这个错误:
TypeError:data.map不是函数
这是我写的测试。请注意我通过了数据道具,我相信它应该能够运作吗?
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;
这是调用此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;
这里有什么问题?
答案 0 :(得分:0)
我认为您设置的data
不是array
,因为您收到错误。
检查一下:
let data = {};
data.map(el => console.log(el))
确保数据应该是数组,您也可以在map
使用Array.isArray
之前进行检查,如下所示:
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',
}
];