如何让 React 组件等待对 return 的 http 调用

Question

我正在学习 react-redux-saga 并且正在使用 saga 进行 HTTP 调用。我使用 mapStateToProps 连接结果，但是，我的反应组件在 http 调用 returns 之前出错。在我的 return 语句的第一行，我得到了一些与 "Cannot find name of undefined" 类似的东西。

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

这是我正在使用的代码：

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

Answer 1

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

如何让 React 组件等待对 return 的 http 调用

How to make React component wait for http call to return

reactjs

redux-saga

react-redux