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

Stack Overflow用户

提问于 2018-08-25 23:52:13

回答 1查看 1K关注 0票数 1

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

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

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

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);

reactjs

react-redux

redux-saga

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-26 00:35:54

在这种情况下，您可以使用&&运算符/三元运算符来检查对象是否有数据或对象是否未定义。这些天来，大多数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);