获取数据，函数 Error() { [native code] } <constructor>: "Function"答案

【问题标题】：Fetch data, function Error() { [native code] } <constructor>: "Function"获取数据，函数 Error() { [native code] } <constructor>: "Function"
【发布时间】：2023-03-26 14:44:02
【问题描述】：

我正在尝试使用 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")
);

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;

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;

【问题讨论】：

标签： javascript html reactjs api fetch

【解决方案1】：

在您的 fetch 方法中，您使用的是接口 .then(Response => Response.json()) 尝试将其重命名为 .then(res => res.json())

在 index.js 中，您将 props 传递给 Panel 和 Button，但只有 Button 正在使用它们。

ProfilePanel.js const { avatar, user } = this.state; 改为this.props

您也可以直接将 .then 中的“parsedJSON”传递给状态，然后像在渲染方法中那样映射它。

【讨论】：

【解决方案2】：

在您的 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 是一个函数。您将其用作财产。因此，要获得该函数的输出，您需要在其后添加括号()。

【讨论】：