在componentDidMount()中获取时出现问题
在componentDidMount()中获取时出现问题
提问于 2018-12-20 02:53:31
当我尝试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;感谢您的帮助！
回答 4
Stack Overflow用户
回答已采纳
发布于 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返回任何内容
Stack Overflow用户
发布于 2018-12-20 02:57:54
您必须返回res.json()才能在下一个.then()中使用它
.then(res => {
res.json();
})应该是
.then(res =>
res.json();
)或者
.then(res => {
return res.json();
})Stack Overflow用户
发布于 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)
})
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53857538
复制相关文章
相似问题