contacts.map不是一个函数?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (100)

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;
提问于
用户回答回答于

contacts.map不是一个函数

给你一个提示,contacts没有一个.map功能,反过来表明,这contacts不是一个Array。由于你的初始数据state.contacts是空Array的,因此你获取并分配的数据setState不能是一个数据Array,因此会引入问题。可能你错过了一个.contacts

this.setState({contacts: res.data.contacts}) 
用户回答回答于

为了检索你的数据的值使用这个

this.setState({contacts: res.data.results})

你收到的错误告诉我们您收到的数据不是数组。因此,为了更好的调试,将所有内容记录到控制台,以便更好地了解你从url获取的内容。

扫码关注云+社区

领取腾讯云代金券