什么意思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;
https://stackoverflow.com/questions/50687916
复制相似问题