Question

我有以下代码

axios
            .get("some.url")
            .then(res => {
                console.log(...res.data);
                this.setState({
                    isLoaded: true, 
                    assignmentData: {...res.data}
                });
                console.log(this.assignmentData) //this returns undefined
            })

从后端获取一些数据并将其保存到状态变量。从服务器发送的数据采用以下格式 [{id:1, title:"abc"},{id:2,title:"bcd"}]。但是，assignmentData的值不会用setState更新，因为以下console.log返回未定义。

如何使用从服务器接收的数据更新assignmentData状态？

Answer 1

首先：app\build\intermediates\signing_config\debug\out\signing-config.json将被添加到状态assignmentData

，其次，this.state.assignmentData是异步的。

如果要在设置后查看数据，可以执行以下操作：

this.setState(..)

Answer 2

您正在尝试访问与不存在的对象有关的值。它存在于state中。因此，您可以按以下方式访问：

this.state.assignmentData

要访问控制台日志中的值，请为setState提供回调，因为它是异步的：

this.setState({
  isLoaded: true,
  assignmentData: { ...res.data },
}, () => {
  console.log(this.state.assignmentData);
});

Answer 3

因为setState是异步的，所以在setState的异步回调中记录日期

axios
            .get("some.url")
            .then(res => {
                console.log(...res.data);
                this.setState({
                    isLoaded: true, 
                    assignmentData: {...res.data}
                },() => console.log(this.state.assignmentData)  );
            })

Answer 4

因为它是异步的而在setState的回调中控制台

    axios
    .get("some.url")
    .then(res => {
        console.log(...res.data);
        this.setState({
            isLoaded: true, 
            assignmentData: {...res.data}
        },()=>console.log(this.state.assignmentData));
    })

或render()中的控制台，您将获得更新状态。

Answer 5

尝试

axios.get("some.url")
     .then(async(res) => {
       console.log(...res.data);
       await this.setState({
         isLoaded: true, 
         assignmentData: {...res.data}
       });
       console.log(this.assignmentData);
});

反应setState以更新对象

5 个答案: