试图分派带有字符串数组作为有效负载的axios动作,但在reducer上保持“未定义”状态?

时间:2020-04-17 11:56:17

标签: json reactjs redux react-redux

我是Web开发的新手,作为项目的一部分,我制作了Django React Redux应用程序。前端节点具有一个带有表单条目的组件-提交表单后,该组件将调用一个操作,该操作将axios请求发送到后端的python twitter爬虫脚本。该脚本返回一个包含字符串数组的响应(tweet位于数组内部)。然后,我尝试将response.data中包含的数组作为有效负载分派给reducer。但是,我总是收到一个错误消息,说我已调度的有效负载是未定义的。

这是被称为python方法的return语句-语料库是一个字符串数组。

return JsonResponse({"results:": corpus})

这是将GET请求发送到python方法的操作的代码。然后返回一个json对象中的字符串数组。

// GET_TWEETS - get list of tweets from hashtag search 
export const getTweets = (hashtag) => dispatch => {
axios
  .get('http://localhost:8000/twitter_search', {
    params: {text: hashtag}
  })
  .then(res => {
    console.log(res.data); //check if python method returns corpus of tweets
    //const results = Array.from(res.data.results);
    dispatch({
      type: GET_TWEET,
      payload: res.data.results
    });
  })
  .catch(err => console.log(err)); 
}

控制台日志显示该对象已从python脚本成功返回。 console log

这是我的减速器的代码。我希望我的操作包含字符串数组,然后将该字符串数组分配给状态中的“ tweets”,以便我可以将其返回给组件,然后从该组件访问该数组,然后在其中显示此tweets数组的内容前端

import { GET_TWEET } from '../actions/types';

const initialState = {
  tweets: []
}

export default function(state = initialState, action) {
  console.log(action.payload)
  switch(action.type) {
    case GET_TWEET:
      return {
        ...state,
        tweets: [...action.payload]
      }
    default:
      return state;
  }
}

另外,这是我要接收字符串数组的组件的一些代码,我希望我已经正确设置了这部分:

export class Tweets extends Component {

  static propTypes = {
    tweets: PropTypes.array.isRequired,
    getTweets: PropTypes.func.isRequired
  }

...

const mapStateToProps = state => ({
  tweets: state.TweetsReducer.tweets
});

export default connect(mapStateToProps, { getTweets })(Tweets);

这是我从控制台收到的错误。控制台记录该操作的有效负载时,还显示其值未定义:undefined error

我已经尝试解决了几天,但是完全迷路了,我很直觉解决这个问题的方法很简单...

0 个答案:

没有答案