gpt4 book ai didi

javascript - 当我通过 fetch API 请求记录我的 React 状态 setState 时,为什么会收到两个响应?

转载 作者:行者123 更新时间:2023-12-03 00:38:52 24 4
gpt4 key购买 nike

我从 React 中的状态的 console.log() 收到两个响应。第一个是空的,第二个包含我要打印的数据。

[] empty array

[{…}] 0: {id: 1, date: "2011-07-01T10:30:30.000Z", name: "John"} length: 1 proto: Array(0)

我的代码如下:

constructor(props){
super(props);
this.state = {
session: []
}
}

componentDidMount(){
this.fetchSessionData();
}

fetchSessionData = () => {
fetch(`http://localhost:3000/sessions/${this.props.match.params.id}`)
.then(response => response.json())
.then(session => this.setState({session:session});
}

render()
{
console.log(this.state.session);
return(
<div>
<p>Hello world + {this.props.match.params.id}</p>
</div>
)
}

如果我的响应中有多个 javascript 对象,我还会看到类似以下内容的内容:

[] empty array

[{…}] 0: {id: 1, date: "2018-11-01T10:30:30.000Z", name: "John"} length: 1 proto: Array(0)

[{…}] 0: {id: 1, date: "2018-11-01T10:30:30.000Z", name: "John"}, {id: 1, date: "2018-07-22T12:37:01.000Z", name: "Steve"}, length: 2, proto: Array(0)

诸如此类。我怀疑这与 promise 或生命周期有关,但未能找到答案。此外,当我尝试访问诸如 this.state.session.id 之类的状态值时,它返回未定义。这里发生了什么?

最佳答案

您的控制台日志位于 render() 函数中,因此每次组件渲染(或重新渲染)时都会触发它。那是正常的。它在首次加载时呈现,然后在完成获取数据和更新状态时重新呈现。

此外,this.state.session 是一个包含 json 对象的数组。因此,您必须编写类似 this.state.session[0].id

的内容

关于javascript - 当我通过 fetch API 请求记录我的 React 状态 setState 时,为什么会收到两个响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53546912/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com