React获取数据null指针异常

Question

我正在学习与redux的反应，我想取得这样的成就：

当我使用此URL时：

some_url/posts/1

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

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

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

在我的组件中：

 componentWillMount() {
 this.props.fetchPost( 
 parseInt(this.props.match.params.postId));
}
render(){
    return(
        <div>
            {post.title}
        </div>
    )};

我的动作创造者：

export function fetchPost(postId){
const request = axios.get(`${ROOT_URL}/posts${postId}`);
return {
    type: FETCH_POST,
    payload: request
};
}

和还原器，在这里，我刚刚用服务器提供的空模板填充了状态。没有这个，我得到了NullPoInterException。

import { FETCH_POST } from "../actions";
export default function(state = {id: 0, title: "", infos: [{id: 0, content: "", authorId: 0}]}, action){
switch(action.type){
    case FETCH_POST:
        return action.payload;
  }
return state;
}

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

Answer 1

Redux中的操作应始终返回应具有强制性type属性的普通JS对象。

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

如果您必须使用redux，则必须使用redux-thunk等中间件。

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

但是，中间是React＆amp;redux。

如果您只想从API中获取一些数据，则可以在Plane React中执行此操作。但是对于使用Redux流，请使用中间件。您也可以在没有中间件的情况下做到这一点，但这不是推荐的方法。

Answer 2

Axios正在使用承诺处理HTTP响应的承诺。

浏览器和node.js

基于承诺的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文档并选择您喜欢的文档，而一个符合您的应用程序要求的文档。