如何使用 axios（获取 json 数据）和 redux（更新状态）更新反应状态？答案

【问题标题】：How can I update react state using axios(to get json data) and redux(to update state)?如何使用 axios（获取 json 数据）和 redux（更新状态）更新反应状态？
【发布时间】：2019-10-15 02:30:55
【问题描述】：

我正在尝试使用 redux 更新 react 状态的值。为了获取我正在使用 axios 的数据，但我们没有返回和更新数据。当我使用 redux 工具检查状态时，状态仍然是初始状态的空列表。

这里是来自 src/action/feedbacks.js。这里使用axios返回json格式的数据

import axios from "axios";

import { GET_FEEDBACKS } from "./types";

export const getFeedbacks = () => dispatch => {
  console.log(axios.get("/api/feedbacks/").res.data);
  axios
    .get("/api/feedbacks/")
    .then(res => {
      dispatch({
        type: GET_FEEDBACKS,
        payload: res.data
      });
    })
    .catch(err => console.log(err));
};

此代码来自 src/reducers/feedbacks.js。

import { GET_FEEDBACKS } from "../actions/types.js";

const initialState = {
  feedbacks: []
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_FEEDBACKS:
      return {
        ...state,
        feedbacks: action.payload
      };
    default:
      return state;
  }
}

此代码来自 src/components/feedbacks/Feedbacks.js

import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import { getFeedbacks } from "../../actions/feedbacks";

export class Feedbacks extends Component {
  static propTypes = {
    feedbacks: PropTypes.array.isRequired
  };

  ComponentDidMount() {
    this.props.getFeedbacks();
  }
  render() {
    return (
      //some return code
    );
  }
}
const mapStateToProps = state => ({
  feedbacks: state.feedbacks.feedbacks
});
export default connect(
  mapStateToProps,
  { getFeedbacks }
)(Feedbacks);

【问题讨论】：

函数被称为componentDidMount，而不是ComponentDidMount。简单的调试会显示您的操作没有被分派。

标签： javascript reactjs react-redux axios react-proptypes

【解决方案1】：

也许您可以在 componentDidUpdate 上获取此更新或使用钩子进行此操作。

试试这样的：

import React, {useEffect} from "react";
import {connect} from "react-redux";
import PropTypes from "prop-types";

import {getFeedbacks} from "../../actions/feedbacks";

export const Feedbacks = props => {
    const {feedbacks, getFeedbacks} = props

    useEffect(() => {
        getFeedbacks();
    }, [])

    return (
       //some return code
    )
}

Feedbacks.propTypes = {
    feedbacks: PropTypes.array.isRequired
};

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

export default connect(
    mapStateToProps,
    {getFeedbacks}
)(Feedbacks);

redux更新时，这个组件接收到feedbacks的json，所以在挂载这个的时候，也许你应该在操作之前检查feedbacks是否有数据或者为空。

【讨论】：