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

Question

我正在尝试通过 React 获取 API，但是当我控制它时，它显示 解析失败

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

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

索引.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;

按钮.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;

Answer 1

在你的 fetch 方法中，你使用了一个接口(interface) .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”直接传递给状态，然后像在渲染方法中那样映射它。