contacts.map不是一个函数
contacts.map不是一个函数
提问于 2018-06-05 03:56:43
什么意思contacts.map不是一个函数，我试图从我创建联系人数组列表中获取数据，以及如何在面板中显示按钮，当我单击每个按钮时，屏幕应该根据我从Api获取的数据显示不同的信息，但是，当我尝试获取API时，按钮不再显示在屏幕中，我想要显示在信息顶部的头像图像也不再显示在面板中，
index.js
const url = 'https://randomuser.me/api/';
class App extends Component {
constructor(props) {
super(props);
this.state = {
contacts: []
}
}
componentDidMount() {
this.fetchdata();
}
fetchdata() {
axios.get(url)
.then(res => {
console.log(res);
this.setState({contacts : res.data});
});
}
render(){
const {contacts} = this.state;
return (
<div className="panel">
{contacts.map(contact => (
<div class="panel">
<Panel
avatar={contact.picture}
/>
<li class="flex-container">
<Button title="user">
<Panel user={contact.name} />
</Button>
</li>
</div>
))}
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("root")
);ProfilePanel.js
const style={
borderRadius: 150,
}
class Panel extends Component {
render() {
const { avatar, user } = this.props;
return (
<div className="Panel">
<div class="panels">
<div className="avatar">
<img src={avatar} style={style}/>
</div>
</div>
<div class="center">
<h2 className="user">{user}</h2>
</div>
</div>
);
}
}
export default Panel;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50687916
复制相关文章
相似问题