当我尝试console.log时,我的用户列表是未定义的。也许我没拿到什么?
我想从我的api获取我的用户列表(用邮递员测试),并将其放入控制台下一步,我想映射我的用户以在应用程序上显示它
class Test extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
}
}
componentDidMount() {
console.log("component did mount");
fetch("/user/list")
.then(res => {
return res.json();
})
.then(users =>
this.setState({users}, () =>
console.log("list of users => " + users)));
}
render() {
return (
<div className="form">
<ul>
{this.state.users.map((user) =>
<li key="user._id">{ user.name }</li>
)}
</ul>
</div>
);
}
} export default Test;
感谢您的帮助!
发布于 2018-12-20 02:57:56
您正在调用res.json()
,而不是从fetch调用的第一个then
返回res.json()
我发现这个模式很有帮助:
fetch(url)
.then(res => res.ok ? res.json() : Promise.reject())
正如您现在的代码一样,users
(第二个then
中的参数将是未定义的,因为您不会从第一个then
返回任何内容
发布于 2018-12-20 02:57:54
您必须返回res.json()
才能在下一个.then()
中使用它
.then(res => {
res.json();
})
应该是
.then(res =>
res.json();
)
或者
.then(res => {
return res.json();
})
发布于 2018-12-20 03:44:29
您应该将res传递给res.json(),并将结果返回到您所在的状态。
componentDidMount() {
console.log("component did mount");
fetch("/user/list")
.then(res => res.json())
.then(users =>
this.setState(users,
() => {
console.log("list of users => " + users)
})
);
}
https://stackoverflow.com/questions/53857538
复制相似问题