Question

最初显示页面时，我无法在“字段”中填充数据...

假设我定义了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" />中显示值，但是总是空白。

Answer 1

您的错误已开启 <Field name="totalFixedAssets" component="input" />

尝试仅将其更改为 <Field name="financialYear.totalFixedAssets" component="input" />

您需要提供该值的完整路径。字段的名称是点和括号符号形式的字符串路径。

这是一个有效的示例：https://codesandbox.io/s/04zrxoyk10

在redux格式中存在一个问题，即如果您已经将数据添加到存储中，则不会呈现该数据。 https://github.com/erikras/redux-form/issues/621

为什么值未显示在我的redux表单中？

1 个答案: