如何让 React 组件等待 http 调用返回答案

【问题标题】：How to make React component wait for http call to return如何让 React 组件等待 http 调用返回
【发布时间】：2018-08-25 23:52:12
【问题描述】：

我正在学习 react-redux-saga，并且正在使用 saga 进行 HTTP 调用。我使用 mapStateToProps 连接结果，但是，在 http 调用返回之前，我的反应组件出错了。在我的 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);

【问题讨论】：

我假设因为它是异步的，user 在调用完成之前是未定义的。提供默认值或显示某种加载 UI。
永远不要让你的组件在渲染之前等待异步返回。正如@Li357 所说，给属性默认值，最好有一些视觉指示器，表明组件正在等待来自某个地方的响应，这样用户就知道发生了什么。
如果你不希望你的组件在数据可用之前渲染，你需要让父组件获取所需的数据，并且只在子组件可用时才渲染它。
我尝试通过父级传递道具值，但问题相同，但在父级中。我基本上会将一个未定义的值传递给孩子，孩子会失败。看答案总算算子大概就是我需要的了

标签： reactjs react-redux redux-saga

【解决方案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);

【讨论】：

NP。继续学习