setState 不定义状态变量（ReactJS）

Question

我是 ReactJS 的菜鸟，我创建了一个主页供用户在登录或注册后查看。我从我的自定义 API（NodeJS）获取数据，但是一旦我获取数据并尝试 setState，它似乎没有更新状态变量。

这是我的代码。

export class SideMenu extends Component {

constructor(props) {

        super(props)

        this.state = {
            user: {},

        };
    }


    componentDidMount() {
        this.fetchData();
        console.log(this.user);
    }

    fetchData = () => {
        axios.get("http://localhost:3001/returningusers").then((response) => {
            const data = response.data.User[0]
            console.log(data)

            this.setState({
                user: data
            })
        })
    } 

我真的需要帮助，它减慢了我的动力，我不知道如何解决它。谢谢。

Answer 1

我不太确定这是 ES6 类方法的正确语法。试试下面的而不是箭头函数怎么样：

fetchData() {
        axios.get("http://localhost:3001/returningusers").then((response) => {
            const data = response.data.User[0]
            console.log(data)

            this.setState({
                user: data
            })
        })
    }

您还需要返回 Promises 和 await 或 then 它们。例如：

async componentDidMount() {
        await this.fetchData(); // you need to wait until this finishes
        console.log(this.state.user);
    }
    // and you need to return the Promise here
    fetchData() => {
        return axios.get("http://localhost:3001/returningusers").then((response) => {
            const data = response.data.User[0]
            console.log(data)

            this.setState({
                user: data
            })
        })
    }