Question

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

这是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);

Answer 1

也许您可以在componentDidUpdate上获得此更新，也可以使用钩子来实现。

尝试这样的事情：

        private void execMultipartPost() throws Exception {

    String path = getRealPathFromURI(DemoCam.this,photoUri);

    RequestBody requestBody;

    if (path != null) {

        File file = new File(path);
        String contentType = file.toURL().openConnection().getContentType();
        fileBody = RequestBody.create(MediaType.parse(contentType), file);
        String filename = "file_" + System.currentTimeMillis() / 1000L;


        requestBody = new MultipartBody.Builder()
                .setType(MultipartBody.FORM)
                .addFormDataPart("image_file", filename + ".jpg", fileBody)
                .addFormDataPart("name", "eere")
                .addFormDataPart("user_id", "346")
                .addFormDataPart("email", "a@gmail.com")
                .addFormDataPart("postal_code", "121001")
                .addFormDataPart("phone", "7503366400")
                .addFormDataPart("type", "S")
                .addFormDataPart("address", "fefrfrf")
                .addFormDataPart("gender", "M")
                .addFormDataPart("skype_id", "hde.jfjf")
                .build();
   }




    okhttp3.Request request = new okhttp3.Request.Builder()
            .url(Constants.EDIT_PROFILE_DATA)
            .post(requestBody)
            .addHeader("Authorization", "Bearer " + api_token)
            .build();


    OkHttpClient okHttpClient = new OkHttpClient.Builder()
            .connectTimeout(150, TimeUnit.SECONDS)
            .writeTimeout(10, TimeUnit.SECONDS)
            .readTimeout(30, TimeUnit.SECONDS)
            .build();


    okHttpClient.newCall(request).enqueue(new Callback() {
        @Override
        public void onFailure(Call call, final IOException e) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {

                    Toast.makeText(DemoCam.this, e.toString(), Toast.LENGTH_SHORT).show();
                    Log.e("TAG", "run:error " + e.toString());
                    e.printStackTrace();
                }
            });
        }


        @Override
        public void onResponse(Call call, final okhttp3.Response response) throws IOException {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    try {

                        ResponseBody responseBody = response.body();
                        String content = responseBody.string();

                        Log.e("TAG", "advisor profile content: " + content);


                    } catch (Exception e) {

                        Toast.makeText(DemoCam.this, e.toString(), Toast.LENGTH_SHORT).show();

                        //pBar.setVisibility(View.GONE);

                        e.printStackTrace();

                    }

                }
            });
        }

    });
}

在redux更新时，该组件会收到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);的json，因此在挂载它时，也许您应该在操作之前检查feedbacks是否有数据或为空。

如何使用axios（获取json数据）和redux（更新状态）更新react状态？

1 个答案: