Reactjs 如何使React组件等待http调用返回

我正在学习react redux saga，我正在使用saga进行HTTP调用。我使用MapStateTops连接结果，但是，在http调用返回之前，我的react组件会出错。我在return语句的第一行得到了一些类似于“找不到未定义名称”的内容

如何让组件等待？进行http调用时，this.props.user将在一瞬间被取消定义，但调用永远不会返回，因为我的应用程序由于运行时错误而死亡

以下是我正在使用的代码：

class ImageGenerator extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let user = this.props.image;
        console.log("USer", this.props.image);
        return (
            <div>
                Name: {user.name.first} {user.name.last}
                Phone: {user.phone}
                Date of Birth: {user.dob.date} <br/>
                Age: {user.dob.age} <br/>
                Email: {user.dob} <br />
                Gender: {user.gender} <br/>
                City: {user.location.city } <br />
                State: {user.location.State } <br />
                Street: {user.location.street } <br />
                <img src={user.picture.medium} alt="No Image Found"/>
                {/* <button onClick={getNewImage}>New Image</button> */}
                <button>Add to Favorites</button> 
           </div>
        )
    }
}

const mapStateToProps = state => {
    console.log("State", state);
    return { image: state.image };
};

const mapDispatchToProps = dispatch => {
    return {
        getNewImage: () =>
            dispatch({
                type: NEXT_IMAGE
            })
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(ImageGenerator);

类ImageGenerator扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
让user=this.props.image；
log（“USer”，this.props.image）；
返回(
名称：{user.Name.first}{user.Name.last}
电话：{user.Phone}
出生日期：{user.dob.Date}

年龄：{user.dob.Age}

电子邮件：{user.dob}

性别：{user.Gender}

城市：{user.location.City}

状态：{user.location.State}

街道：{user.location.Street}

{/*新图像*/}
添加到收藏夹
)
}
}
常量mapStateToProps=状态=>{
console.log（“State”，State）；
返回{image:state.image}；
};
const mapDispatchToProps=调度=>{
返回{
getNewImage:（）=>
派遣({
类型：下一张图片
})
}
};
导出默认连接（mapStateToProps、mapDispatchToProps）（ImageGenerator）；

在这种情况下，您可以使用&&operator/trialoperator检查对象是否有数据或对象是否未定义。现在大多数React问题都有这些问题，但解决方法非常简单

检查下面更新的代码以更好地理解

  class ImageGenerator extends Component {
        constructor(props) {
            super(props);
        }
       render() {
            const { user }= this.props;
            console.log("USer", this.props.image);
            return (
                 <div>
                      {user && user != undefined && (Name: {user.name.first} {user.name.last}
                     Phone: {user.phone}
                    Date of Birth: {user.dob.date} <br/>
                    Age: {user.dob.age} <br/>
                   Email: {user.dob} <br />
                   Gender: {user.gender} <br/>
                   City: {user.location.city } <br />
                   State: {user.location.State } <br />
                  Street: {user.location.street } <br />
                 <img src={user.picture.medium} alt="No Image Found"/>)}
                  {/* <button onClick={getNewImage}>New Image</button> */}
                 <button>Add to Favorites</button> 
              </div>
             )
        }
    }

     const mapStateToProps = state => {
          console.log("State", state);
            return { user: state.image };
     };

   const mapDispatchToProps = dispatch => {
         return {
             getNewImage: () =>
                dispatch({
                     type: NEXT_IMAGE
                })
             }
         };

   export default connect(mapStateToProps, mapDispatchToProps)(ImageGenerator);

类ImageGenerator扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{user}=this.props；
log（“USer”，this.props.image）；
返回(
{user&&user！=未定义的&&（名称：{user.Name.first}{user.Name.last}
电话：{user.Phone}
出生日期：{user.dob.Date}

年龄：{user.dob.Age}

电子邮件：{user.dob}

性别：{user.Gender}

城市：{user.location.City}

状态：{user.location.State}

街道：{user.location.Street}

)}
{/*新图像*/}
添加到收藏夹
)
}
}
常量mapStateToProps=状态=>{
console.log（“State”，State）；
返回{user:state.image}；
};
const mapDispatchToProps=调度=>{
返回{
getNewImage:（）=>
派遣({
类型：下一张图片
})
}
};
导出默认连接（mapStateToProps、mapDispatchToProps）（ImageGenerator）；

我假设，因为它是异步的，

user

在调用完成之前是未定义的。提供默认值或显示某种加载UI。不要让组件在呈现之前等待异步返回。正如@Li357所说，为属性提供默认值，最好有一些视觉指示器，表明组件正在等待来自某处的响应，因此，用户知道发生了什么。如果您不希望组件在数据可用之前呈现，则需要让父级获取所需数据，并仅在可用时呈现子级。我尝试通过父级传递prop值，但这与父级中的问题相同。我本质上是在向子对象传递一个未定义的值，子对象将失败。看看答案，物业经营者可能就是我所需要的。不断学习