Question

我正在学习react-redux-saga，并且正在使用saga进行HTTP调用。我使用mapStateToProps连接结果，但是在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);

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组件等待http调用返回

1 个答案: