Question

我正在尝试使用react来获取API，但是当我控制它时，它会显示解析失败

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

我在面板内创建了一个按钮，当我点击每个按钮时，屏幕应根据我从Api获取的数据显示不同的信息，但是，当我尝试获取API时，按钮不会显示在屏幕上我想要在信息之上显示的头像图像也不再显示在面板中，我不知道哪里出错了。此外，我使用的API网址每天只能随机输出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;

Answer 1

在您的获取方法中，您使用了界面.then(Response => Response.json()) 尝试将其重命名为.then(res => res.json())

之类的其他内容

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

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

你也可以传递＆＃34; parsedJSON＆＃34;在.then直接到州，然后像你在渲染方法中那样映射它。

Answer 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()))
  }

Error语句中的catch是一个函数。您正在将其用作财产。因此，要获得该函数的输出，您需要在其后添加括号()。

获取数据，函数Error（）{[native code]} <constructor>：“Function”

2 个答案: