Почему значение не отображается в моей избыточной форме? - PullRequest
Новая
       15

Почему значение не отображается в моей избыточной форме?

0 голосов
/ 17 апреля 2019

Я не могу получить данные, заполненные в полях, когда страница первоначально отображается ...

Я предполагал, что если бы я определил finYear, то он автоматически использовал бы имя атрибутов внутри finYear и сопоставил бы его с атрибутом <Field name="totalFixedAssets">? 

import React from "react";
import { Field, reduxForm } from "redux-form";
import { fetchFinancialYear } from "../actions/financialYearActions";
import { connect } from "react-redux";

class FirstForm extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchFinancialYear(this.props.match.params.id));
  }
  render() {
    return (
      <form>
        <div>
          <div>{this.props.finYear.totalFixedAssets}</div>
          <label>Total Fixed Assets</label>
          <Field name="totalFixedAssets" component="input" />
        </div>
      </form>
    );
  }
}

const mapStateToProps = state => ({
  finYear: state.financialYearReducer.financialYear
});

const mapDispatchToProps = dispatch => ({
  // ...
});

FirstForm = reduxForm({
  form: "firstForm"
})(FirstForm);

export default connect(
  mapStateToProps,
  mapDispatchToProps // bind account loading action creator
)(FirstForm);

код редуктора ... 

import {
  FETCH_FINANCIAL_YEAR_BEGIN,
  FETCH_FINANCIAL_YEAR_SUCCESS,
  FETCH_FINANCIAL_YEAR_FAILURE
} from "../actions/financialYearActions";

const initialState = {
  financialYear: {},
  loading: false,
  error: null
};

function financialYearReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_FINANCIAL_YEAR_BEGIN:
      return {
        ...state,
        loading: true,
        error: null
      };

    case FETCH_FINANCIAL_YEAR_SUCCESS:
      return {
        ...state,
        loading: false,
        financialYear: action.payload.financialYear
      };

    case FETCH_FINANCIAL_YEAR_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload.error,
        financialYear: {}
      };

    default:
      return state;
  }
}

export default financialYearReducer;

код действия ... 


import axios from "axios";

export const FETCH_FINANCIAL_YEAR_BEGIN = "FETCH_FINANCIAL_YEAR_BEGIN";
export const FETCH_FINANCIAL_YEAR_SUCCESS = "FETCH_FINANCIAL_YEAR_SUCCESS";
export const FETCH_FINANCIAL_YEAR_FAILURE = "FETCH_FINANCIAL_YEAR_FAILURE";

export const fetchFinancialYearBegin = () => ({
  type: FETCH_FINANCIAL_YEAR_BEGIN
});

export const fetchFinancialYearSuccess = financialYear => ({
  type: FETCH_FINANCIAL_YEAR_SUCCESS,
  payload: { financialYear }
});

export const fetchFinancialYearFailure = error => ({
  type: FETCH_FINANCIAL_YEAR_FAILURE,
  payload: { error }
});

export function fetchFinancialYear(financialYearUuid) {
  return dispatch => {
    dispatch(fetchFinancialYearBegin());
    const accountRequest = {
      financialYearUuid: financialYearUuid,
      userUuid: "asdf"
    };
    return axios
      .post("/account/service/fetch/single", accountRequest)
      .then(res => {
        dispatch(fetchFinancialYearSuccess(res.data.financialYear));
        return res.data;
      })
      .catch(error => dispatch(fetchFinancialYearFailure(error)));
  };
}

function handleErrors(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

Я успешно возвратил данные из вызова API и могу отображать их в <div>{this.props.finYear.totalFixedAssets}</div> в форме, хотя я пытаюсь отобразить значение в <Field name="totalFixedAssets" component="input" /> в форме, но оно всегда пустое.

1 Ответ

0 голосов
/ 17 апреля 2019

Ваша ошибка включена <Field name="totalFixedAssets" component="input" />

Попробуйте просто изменить его на <Field name="financialYear.totalFixedAssets" component="input" />

Вам необходимо указать полный путь к значению. Имя поля - это строковый путь в точечно-скобочной записи.

Вот рабочий пример: https://codesandbox.io/s/04zrxoyk10

Существует проблема в избыточных формах, когда, если у вас есть данные, уже добавленные в хранилище, они не отображаются. https://github.com/erikras/redux-form/issues/621

...