Question

我正在尝试使用React与Rest API进行交互，而我意识到的是，当我尝试从rest api获取数据时，渲染被调用了，一次没有数据，仅在下一次调用中我看到了数据

。

当我尝试处理此数据时，这引发异常，我可以放置if条件来检查数据是否为空。但是，不确定是否需要。

class App extends Component {
    state = {
        TodoList: {}
    }

    componentWillMount(){
        axios.get('http://localhost:5001/1').then((response)=>{
            this.setState(
                {
                    TodoList: response.data
                }
            )
        });
    }

    render() {
        console.log(this.state)
        return(<h1>hello </h1>);
    }
}

这就是我在控制台日志中看到的内容

Answer 1

那很正常。

您的App组件流程如下：

在componentDidMount中执行代码
调用axios.get这是异步操作
执行render方法以加载组件
从步骤2接收数据，使用this.setState
App组件检测到状态更新，因此执行render方法来再次加载组件

因此，您绝对应该处理this.state.TodoList没有第一次加载时发生的数据的情况

更新：

组件生命周期componentWillMount现在已过时，这意味着您不再应该使用它。改为使用componentDidMount。从功能上讲，它们在您的示例中应该没有区别

Answer 2

注意：componentWillMount已过时，并且可以使用到版本17。

来源-https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

最适合调用API的React Lifecycle： componentDidMount是执行异步任务（如API调用，setTimeouts等）的首选方法。

它将作为-

在componentDidMount上，您的API被调用
按照生命周期顺序，最后将调用render方法。（仍然API尚未返回响应）。您的用户界面会在初始绘制时显示。
一旦API获得响应，您就可以使用this.setState()来强制重新渲染操作。
再次更改您的用户界面

记住：this.setState()仅会被调用一次，无论您是否在生命周期方法中调用了一次或多次。

Answer 3

最初，在cwm方法之后调用render方法。因此，控制台日志会第一次显示该状态的空值。
但是您已经在cwm方法中运行了异步操作，因此完成后，将调用setstate方法，这将使render方法再次运行。

注意：不推荐使用ComponentWillMount，componentWillUpdate和componentWillUpdate道具方法。

您应将此API调用移至componentDidmount或ComponentDidUpdate方法。

但是，在此之后的事件中，您的控制台日志将出现两次-一次用于初始呈现，第二次用于在API调用后调用的setstate。

从静止获取数据时，ReactJS渲染被调用两次

3 个答案: