问题描述
大家好，我正在使用《星球大战》 API在ReactJS中进行实验。
我想收集以下形式的人员：
{
"count": 87,
"next": "https://swapi.co/api/people/?page=2",
"previous": null,
"results": [
{
"name": "Luke Skywalker",
"height": "172",
"mass": "77",
"hair_color": "blond",
"skin_color": "fair",
"eye_color": "blue", ... (continues)
因为我可以获取单个字符，所以我知道获取机制正在起作用，但是我无法获取结果中的字符列表。
我的应用程序如下所示：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Character from './Character'
class App extends Component {
constructor() {
super()
this.state = {
people : {},
character: {}
}
fetch("https://swapi.co/api/people/1")
.then(response => response.json())
.then(data => {
this.setState({
character: data
})
})
fetch("https://swapi.co/api/people/")
.then(response => response.json())
.then(data => {
this.setState({
people: data
})
})
console.log(this.state.people)
console.log(this.state.people.results)
}
render() {
return (
<div className="App">
<Character
character = { this.state.character}
/>
</div>
);
}
}
export default App;
我从console.log的信息中获取此信息（其余信息用于正常工作的单个字符）。
第一个console.log给我一个（在firefox Web控制台中）
对象{}
第二个让我不确定。
我已经尝试了很多东西，但似乎找不到如何获取该字符列表。.我还缺少什么？
1楼
1）您应该将请求调用移至componentDidMount生命周期方法
2）setState方法是异步的，因此记录该值可能无法在该确切时刻给出正确的值。 要获取正确的property值，请使用第二个参数（一个函数），该参数在状态更新后将被调用。
class App extends Component {
constructor() {
super()
this.state = {
people : [], // it should an array
character: {}
}
}
componentDidMount() {
fetch("https://swapi.co/api/people/1")
.then(response => response.json())
.then(data => {
this.setState({
character: data
}, () => console.log(this.state.character))
})
fetch("https://swapi.co/api/people/")
.then(response => response.json())
.then(data => {
this.setState({
people: data.results
}, () => console.log(this.state.people.results))
})
}
render() {
return (
<div className="App">
<Character
character = { this.state.character}
/>
</div>
);
}
}
export default App;
2楼
您应该以此为契机来使用React挂钩。 未来future
const App = () => {
// equivalent to the state object in your constructor
const [people, setPeople] = React.useState({});
const [character, setCharacter] = React.useState({});
// as second argument is an empty array it is
// the equivalent of componentDidMount
React.useEffect(() => {
fetch("https://swapi.co/api/people/1")
.then(response => response.json())
.then(data => {
setCharacter(data);
}
)
fetch("https://swapi.co/api/people/")
.then(response => response.json())
.then(data => {
setPeople(data);
}
)
}, []);
return (
<div className="App">
<Character character={character} />
</div>
)
}