Javascript 组件通过props发送未定义，因为它是在数据库查询结束之前装载的

我有一个与react native异步世界相关的问题

我需要执行一个数据库查询，这个查询返回一个城市向量，这个向量应该通过道具发送给一个选择器

问题是：我在ComponentWillUpdate函数中执行查询（默认情况下，这是在安装屏幕之前调用的第一个函数）。但是，即使使用componentWillMount，组件（选择器）也正在组装，并通过道具发送未定义的数据。 应发送的数据未及时处理。 我的计划流程如下：

启动查询（componentWillMount）->渲染组件（渲染）->结束查询

是否可以暂停屏幕安装，直到ComponentWillUpdate中的查询结束

我尝试使用async，但不起作用

async componentWilldMount() {
        try {
            await axios.get(`${server}/getdata`)
                .then(
                //code
                })
                .catch(function (error) {
                //handle error
                })
        } catch (err) {
            // handle error
        }
    }

---

无法暂停或停止渲染组件。不过，您可以在您的状态中设置一些属性，比如说

data

。所以在你的构造器中你会有这样的东西：

constructor(props) {
    this.state = {
        data: null
    }
}

然后在您的componentWillMount或更好的componentDidMount中，您可以：

componentDidMount() {
    axios.get(`${server}/getdata`)
        .then(response => {
            this.setState({
                data: response
            })
        )
        .catch(function (error) {
            //handle error
        })

最后一步是根据数据进行渲染，因此在渲染方法中：

render() {
    if(!state.data) {
        return null;
    }

    <SomeComponent data={this.state.data} />
}

render（）{
如果（！state.data）{
返回null；
}
}

无法暂停或停止渲染组件。不过，您可以在您的状态中设置一些属性，比如说

data

。所以在你的构造器中你会有这样的东西：

constructor(props) {
    this.state = {
        data: null
    }
}

然后在您的componentWillMount或更好的componentDidMount中，您可以：

componentDidMount() {
    axios.get(`${server}/getdata`)
        .then(response => {
            this.setState({
                data: response
            })
        )
        .catch(function (error) {
            //handle error
        })

最后一步是根据数据进行渲染，因此在渲染方法中：

render() {
    if(!state.data) {
        return null;
    }

    <SomeComponent data={this.state.data} />
}

render（）{
如果（！state.data）{
返回null；
}
}

解决方案：在父组件中使用

isReady

标志

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
伊斯雷迪：错，
}
}
componentDidMount（）{
设置超时（（）=>{
this.setState（{值：“bbb”，isReady:true}）；
}, 5000)
}
render（）{
返回(
{this.state.isReady&&}
);
}
}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
console.log（props.value）；
}
render（）{
返回(
{this.props.value}
);
}
}
ReactDOM.render（，document.getElementById（'root'）
解决方案：在父组件中使用
isReady
标志


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
伊斯雷迪：错，
}
}
componentDidMount（）{
设置超时（（）=>{
this.setState（{值：“bbb”，isReady:true}）；
}, 5000)
}
render（）{
返回(
{this.state.isReady&&}
);
}
}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
console.log（props.value）；
}
render（）{
返回(
{this.props.value}
);
}
}
ReactDOM.render（，document.getElementById（'root'）

您对获取的信息做了什么？您正在使用它设置状态吗？我正在将数据存储在一个全局变量中，并通过props将此变量发送到组件。我的方法是要么使用状态（状态更改时，新的props将被传递，所有内容都将重新加载），要么使用redux并将其存储在redux中（如果使用redux）您对获取的信息做了什么？您正在使用它设置状态吗？我正在将数据存储在一个全局变量中，并通过props将此变量发送到组件。我的方法是要么使用状态（状态更改时，新的props将被传递，所有内容都将重新加载），要么使用redux并将其存储在redux中（如果使用redux）