Javascript 获取数据，函数错误（）{[本机代码]}<；构造函数>；：&引用；功能“；

我试图用react获取API，但是当我控制台它时，它显示 解析失败

function Error() { [native code] } 
<constructor>: "Function"
name: "Function".

函数错误（）{[本机代码]}
：“功能”
名称：“功能”。

我在面板内创建了一个按钮，当我点击每个按钮时，屏幕上应该会根据我从Api获取的数据显示不同的信息，但是，当我试图获取Api时，按钮不再显示在屏幕上，我想在信息顶部显示的化身图像也不再显示在面板上，我不知道哪里错了。此外，我使用的API url每天只能随机生成500个结果。但我不认为这是问题所在，因为我尝试使用另一个链接，这仍然是一个相同的问题。谢谢你的帮助

index.js

const url = 'https://beta.randomapi.com/api/9qvib112?key=X7E9-7CWN-4TY0-7GZT&results=12';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      contacts: []
    }
  }

  componentDidMount() {
    this.fetchdata();
  }

  fetchdata() {
    fetch(url)
      .then(Response => Response.json())
      .then(parsedJSON => console.log(parsedJSON.results.map(users => (
        {
          name: `${users.user.first} ${users.user.last}`,
          birthday: `${users.birthday}`,
          email: `${users.email}`,
          address: `${users.address}`,
          phone: `${users.phone}`,
          password: `${users.password}`,
          image: `${users.image}`,
        }
      ))))
      .then(contacts => this.setState({
        contacts,
      }))
      .catch(erro => console.log('parsing failed', Error))
  }

  render() {
    const {contacts} = this.state;
    return (
      <div className="panel">

        {
          contacts.length > 0 ? contacts.map(contact => {
            return 
            <div class="panel">
              <Panel 
                avatar={contact.image}
              />
                <li class="flex-container">
                  <Button title="user">
                    <Panel user={contact.name} />
                  </Button>
                  <Button title="email">
                  <Panel user={contact.email} />
                  </Button>
                  <Button title="birthday">
                  <Panel user={contact.birthday} />
                  </Button>
                  <Button title="address">
                  <Panel user={contact.address} />
                  </Button>
                  <Button title="phone">
                  <Panel user={contact.phone} />
                  </Button>
                  <Button title="password">
                  <Panel user={contact.password} />
                  </Button>
                </li>
            </div>
          }) : null
        }
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

consturl='1〕https://beta.randomapi.com/api/9qvib112?key=X7E9-7CWN-4TY0-7GZT&结果=12'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
联系人：[]
}
}
componentDidMount（）{
这是fetchdata（）；
}
fetchdata（）{
获取（url）
.then（Response=>Response.json（））
.then（parsedJSON=>console.log（parsedJSON.results.map）（users=>(
{
名称：`${users.user.first}${users.user.last}`，
生日：`${users.birth}`，
电子邮件：`${users.email}`，
地址：`${users.address}`，
电话：`${users.phone}`，
密码：`${users.password}`，
图像：`${users.image}`，
}
))))
.then（contacts=>this.setState({
联络，
}))
.catch（erro=>console.log（'解析失败'，错误））
}
render（）{
const{contacts}=this.state；
返回(
{
contacts.length>0？contacts.map（contact=>{
返回


})：null
}
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

ProfilePanel.js

const style={
  borderRadius: 150,
}



class Panel extends Component {
  constructor(props){
    super(props);
    this.state = {
      avatar: "",
      user: ""
    }
  }

  render() {
    const { avatar,  user } = this.state;
    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;

const样式={
边界半径：150，
}
类面板扩展组件{
建造师（道具）{
超级（道具）；
此.state={
化身：“，
用户：“
}
}
render（）{
const{avatar，user}=this.state；
返回(
{user}
);
}
}
导出默认面板；

Button.js

import './index.css';
import React, { Component } from 'react';


const styles = {
  color: 'white',
  background: '#0288d1',
  margin: '20px',
  width: 150,
  height: 40,
  borderRadius: 50,
  marginTop: 0,
  marginBottom: 40,
}

class Button extends Component {

  constructor(props) {
    super(props);
    this.state = {
      open:false,
    };
  }

  render() {
    const { title, children} = this.props;
    const {open} = this.state;
    return (
      <div className={` ${open ? 'open' : ''}`} 
      class='button' onClick={(e) => this.handleClick(e)}>
        <div className="panel-heading">
          <h2 class='buttoncenter'>{title}</h2>
        </div>
        <div className="panel-collapse">
          <div className="panel-body">
            {children}
          </div>
        </div>
      </div>
    );
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({
      open: !this.state.open
    })
  }
  }

  export default Button;

import./index.css'；
从“React”导入React，{Component}；
常量样式={
颜色：'白色'，
背景：“#0288d1”，
保证金：“20px”，
宽度：150，
身高：40，
边界半径：50，
玛金托普：0，
marginBottom:40，
}
类按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
开：错，
};
}
render（）{
const{title，children}=this.props；
const{open}=this.state；
返回(
这个.handleClick（e）}>
{title}
{儿童}
);
}
handleClick（e）{
e、 预防默认值（）；
这是我的国家({
打开：！this.state.open
})
}
}
导出默认按钮；

在fetch方法中，您使用的是一个接口

。然后（Response=>Response.json（））

尝试将其重命名为类似

。然后（res=>res.json（））

在index.js中，您将道具传递给面板和按钮，但只有按钮在使用它们

ProfilePanel.js

const{avatar，user}=this.state将其更改为
this.props

您也可以将
中的“parsedJSON”直接传递到状态，然后像在render方法中那样映射到状态。
在index.js文件中

在
fetchData（）函数中

fetchdata() {
    fetch(url)
      .then(Response => Response.json())
      .then(parsedJSON => console.log(parsedJSON.results.map(users => (
        {
          // Your Code
        }
      ))))
      .then(contacts => this.setState({contacts}))
      .catch(error => console.log('parsing failed', Error()))
  }

catch
语句中的
Error
是一个函数。您正在将其用作属性。因此，要获得该函数的输出，需要在其后面添加括号
（）