Question

我正在学习对redux的反应，我想实现以下目标：

当我转到此网址时：

some_url / posts / 1

我想从服务器中获取一些数据，然后将其显示在页面上。

但是它会引发空指针异常，因为它需要一些时间来获取数据。

我做了这样的事情，但是看起来并不好，防止这种空指针异常并等到数据到达之前的正确方法是什么？

在我的组件内部：

我的动作创建者：

s{^D(\d{2})/(\d{2})/(\d{2})\n}{ "D$1/$2/".( $3 < 50 ? 20 : 19 )."$3\n" }eg

还有reducer，这里我只是用服务器提供的对象的空模板填充状态。没有这个，我得到了NullPointerException。

 componentWillMount() {
 this.props.fetchPost( 
 parseInt(this.props.match.params.postId));
}

render(){
    return(
        <div>
            {post.title}
        </div>
    )};

等待数据到达的正确方法是什么？

Answer 1

Axios正在使用Promise to handle http responses aynshcronously。

用于浏览器和node.js的基于Promise的HTTP客户端

因此，当您返回请求对象时，当前无法解析该对象。我认为您需要使用类似于以下内容的代码来重构您的代码：

function fetchPost(postId) {
   return axios.get(`${ROOT_URL}/posts${postId}`);
}

// And your action creator
function updateContent(payload) {
   return {
      type: UPDATE_CONTENT,
      payload: payload,
   }
}

然后在您的组件中调用它：

componentWillMount() {
 fetchPost(parseInt(this.props.match.params.postId)).then(this.props.updateContent);
}

顺便说一句，有很多方法可以做到这一点，我认为您应该阅读axios文档，并选择您喜欢的一种和满足您的应用程序需求的一种。

Answer 2

redux中的操作应始终返回纯JS对象，该对象应具有强制性的type属性。

在动作创建器中执行异步代码时，返回的对象不再是普通的JS对象。

如果必须使用redux，则必须使用redux-thunk之类的中间件。

https://github.com/reduxjs/redux-thunk

但是，中间件是react＆redux中的高级主题。

如果您只想从api中获取一些数据，则可以简单地进行操作。但是要使用redux flow，请使用中间件。您也可以不使用中间件来做到这一点，但这不是推荐的方法。

反应获取数据空指针异常

2 个答案: