Reactjs 在componentDidMount下更新react中的对象

我能够从API node.js服务器获得正确的数据。然而，当我试图设置对象的状态来渲染它时，它总是返回null

我尝试在响应之前使用spread运算符，但它仍然不起作用

import React, { Component } from "react";
import axios from "axios";

class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      UserData: null,
      isLoading: false,
      error: null
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });
    axios
      .get(
        `http://localhost:5000/api/v1/profile/${this.props.match.params.platform}/${this.props.match.params.gamertag}`
      )
      .then(response => {
        console.log(response.data);
      })
      .then(response => {
        this.setState({
          UserData: response.data,
          isLoading: false
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    const { isLoading, UserData } = this.state;
    if (isLoading) {
      return <p>Loading ...</p>;
    }
    console.log(UserData);
    return <div>{UserData}</div>;
  }
}

export default Profile;

import React，{Component}来自“React”；
从“axios”导入axios；
类概要文件扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
UserData:null，
孤岛加载：false，
错误：null
};
}
componentDidMount（）{
this.setState（{isLoading:true}）；
axios
.得到(
`http://localhost:5000/api/v1/profile/${this.props.match.params.platform}/${this.props.match.params.gamertag}`
)
。然后（响应=>{
console.log（response.data）；
})
。然后（响应=>{
这是我的国家({
UserData:response.data，
孤岛加载：false
});
})
.catch（error=>this.setState（{error，isLoading:false}））；
}
render（）{
const{isLoading，UserData}=this.state；
如果（孤岛加载）{
返回加载…
；
}
console.log（UserData）；
返回{UserData}；
}
}
导出默认配置文件；

---

当我尝试登录时。UserData日志为“null”，但“console.log（response.data）”工作正常，因此它必须使用setState进行操作。您不需要两个chain two then（），您可以获取响应并在之后设置状态。then（）

componentDidMount（）{
this.setState（{isLoading:true}）；
axios
.得到(
`http://localhost:5000/api/v1/profile/${this.props.match.params.platform}/${this.props.match.params.gamertag}`
)
。然后（响应=>{
这是我的国家({
UserData:response.data，
孤岛加载：false
});
})
.catch（error=>this.setState（{error，isLoading:false}））；
}

当您像.then（）这样链接数据方法时，以下链接方法将自动接收上一个函数返回的值

getData
 .then(res => console.log(res))

console.log本身将不返回任何内容，因此下面的.then（）方法将不接收任何内容

getData
 .then(res => console.log(res))
 .then(data => console.log(data))

因此，如果执行此操作，第二个console.log（）将记录为null

您可以通过在console.log步骤中返回某些内容来修复它：

  getData
  .then(data => {
    console.log(data);
    return data;
  })
  .then(data => this.setState({ data: data }));

---

和第二个控制台。log（）将正确登录。

您需要在中间返回（或）中间的响应数据，或者只是删除它，因为您不需要它。这就是原因，不知道我在想什么。