Извлечь данные, функция Error () {[собственный код]} <constructor>: «Функция»

Question

Я пытаюсь получить API с реакцией, однако, когда я его консоль, он показывает, что синтаксический анализ не удалось

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

, и я создал кнопки на панели, когда я нажимаю каждую кнопку, экран должен показатьдругая информационная база данных, которые я получаю из Api, однако, когда я пытаюсь получить API, кнопки больше не отображаются на экране, и изображение аватара, которое я хочу показать поверх информации, также не отображается на панелибольше я понятия не имею, где не так.Кроме того, URL-адрес 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

В вашем файле 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 является функцией.Вы используете его как собственность.Следовательно, чтобы получить выходные данные этой функции, вам нужно добавить круглые скобки () после нее.

Answer 2

В вашем методе выборки вы используете интерфейс .then(Response => Response.json()) Попробуйте переименовать его во что-то еще, например .then(res => res.json())

В index.js вы передаете реквизиты Panel и Button, но только Buttonиспользует их.

ProfilePanel.js const { avatar, user } = this.state; Измените его на this.props

Вы также можете просто передать "parsedJSON" в .then непосредственно в состояние и затем отобразить его, как вы "делает в методе рендеринга.