Fetch data， function 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")
);

配置文件面板.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

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

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

配置文件面板.jsconst { avatar, user } = this.state;将其更改为this.props

您也可以将.then中的"parsedJSON"直接传递给状态，然后像在 render 方法中所做的那样映射它。

Answer 2

在你的索引中.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是一个函数。您正在将其用作属性。因此，要获取该函数的输出，您需要在其后添加括号()。