Assign fetch response to setState in React componentdidmount function

I should start out by saying I'm pretty new to React.

When a component mounts, I need to fetch an API endpoint, and assign the JSON response to state data. Ultimately, I need to pass the JSON response to another component.

I've tried putting the fetch directly in the componentDidMount() function but that did not work. Below, you can see the error generated in the console. This is at line 25 console.log("This data => " + JSON.stringify(this.state.data));

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'data')

Any insight into how I can pass the response of /profile/:id to the ResultsDashboard component would be helpful.

Below is the code I have for my component.

import ReactDOM from 'react-dom';
import {  Tabs } from 'antd';
import { ResultsDashboard } from './ResultsDashboard.js'
export class TestResults extends React.Component {
constructor(props){
super (props);
}
getProfileData (){
console.log("Making a fetch for URL /profile/" + window.location.href.split('/')[4])
fetch('/profile/' + window.location.href.split('/')[4]).then( response => {
console.log("Response in Fetch => " + JSON.stringify(response))
this.setState({data:  response.json()})
this.setState({urls: this.getUrls()}); 
});
}
componentDidMount(){
this.getProfileData();
}
getUrls(){
const urls = [];
console.log("This data => " + JSON.stringify(this.state.data));
for (var x = 0; x < this.state.data.length; x++){
urls.push(this.state.data[x].url)
}
return urls
}
render (){
return(
<div>
<Tabs
defaultActiveKey="1"
type="card"
size="large"
items={this?.state?.urls?.map((url,index) => {
return {
label: `${url.substr(0,75)}`,
key: index,
children: <ResultsDashboard testIndex={index} aggregateData={this.state.data}/>
};
})}
/>
</div>
);
}
} 
</details>
# 答案1
**得分**: 1
Sure, here are the translated parts:
尝试这个 `.then((response) => response.json()).then((data) => {...}`
最好将 `this.getUrls()` 更改为 `this.getUrls(data)`，因为 `this.state.data` 的值可能尚未更新。
```js
getProfileData() {
console.log("为URL /profile/进行获取：" + window.location.href.split("/")[4]);
fetch("/profile/" + window.location.href.split("/")[4])
.then((response) => response.json())
.then((data) => {
console.log("在Fetch中的响应 => " + JSON.stringify(response));
this.setState({ data: data });
this.setState({ urls: this.getUrls(data) });
});
}

此外，请记得在 constructor() 中添加 this.state = { data: {}, urls: [] };。

getProfileData() {
  console.log("Making a fetch for URL /profile/" + window.location.href.split("/")[4]);
  fetch("/profile/" + window.location.href.split("/")[4])
    .then((response) => response.json())
    .then((data) => {
      console.log("Response in Fetch => " + JSON.stringify(response));
      this.setState({ data: data });
      this.setState({ urls: this.getUrls(data) });
    });
}

答案2

得分: 0

实际上，你正在将一个函数赋给 urls 变量。

你可以尝试在 getUrls 函数中使用 this.setState，将 urls 变量赋值，并将数据作为参数传递。

getProfileData () {
    console.log("Making a fetch for URL /profile/" + window.location.href.split('/')[4]);
    fetch('/profile/' + window.location.href.split('/')[4]).then(response => {
        console.log("Response in Fetch => " + JSON.stringify(response));
        this.setState({ data: response.json() });
        this.getUrls(response.json());
    });
}

getUrls(data) {
    const myVar = [];
    console.log("This data => " + JSON.stringify(data));
    for (var x = 0; x < data.length; x++) {
        myVar.push(data[x].url);
    }
    this.setState({ urls: myVar });
}

请注意，我已经将代码中的 HTML 实体引用（如 " 和 <）转换为正常的字符，以便更容易阅读和理解。

getProfileData (){
console.log("Making a fetch for URL /profile/" + window.location.href.split('/')[4])
fetch('/profile/' + window.location.href.split('/')[4]).then( response => {
console.log("Response in Fetch => " + JSON.stringify(response))
this.setState({data:  response.json()})
this.getUrls(response.json()); 
});
}
getUrls(data){
const myVar = [];
console.log("This data => " + JSON.stringify(data));
for (var x = 0; x < data.length; x++){
myVar.push(data[x].url)
}
this.setState({urls: myVar})
}