连接向导到 redux [英] connectiong wizard to redux

问题描述

      action.ts:
      export const fetchField = (dispatch) => {
          console.log("!!!")
          const Form = new Service();
          Form
            .getProduct()
            .then((spec: Spec) => {
              dispatch({
                type: ACTIONS.SPEC.SHOW,
                spec : specification,
              });
            })
            .catch((err) => {});
        };

    appReducer:
    export interface FormsState {
     products: Array<Specification>
    }
    let initialState: FormsState = {
    products: []
    };

    export let appReducer = (
      state: FormsState = initialState,
      action
    ) => {
      switch (action.type) {
        case ACTIONS.SPEC.SHOW:
          return Object.assign({}, state, {
              products: [...action.products],
            });

        default:
          return state;
      }
    };

App.tsx:

const mapStateToProps = (state: FormsState) => {
  return state;
};


const mapDispatchToProps = dispatch => {
  return {
    fetchField: () => fetchField(dispatch),
  };
}
interface Props{
  fetchField: Function;
  details: Array<Specification>
}

 componentDidMount() {
    this.props.fetchSwaggerField();
}
render(){
<TextInput
            invalidText="A valid value is required"
            labelText="API title"
            type = "text"
            value={this.props.fetchField.length}
            name="title"


      /> 
}

我试图从 redux api 调用中获取文本输入中的值，并期望文本字段中的 api 调用值.一旦我将得到它的价值.我想编辑它的值，并保存它的新值，这样每当我回到表单时，新值应该被保留

I am trying to get the value in text input from the redux api call, and expecting the value of api call in text field. Once I will be getting its value. I want to edit it value, and save its new value so that whenever i come back to the form, the new value should be retained

推荐答案

这是添加/删除字段的新问题的答案

您可以使用 FieldArray.FieldArray 组件是您呈现字段数组的方式(ref)

You can use FieldArray. The FieldArray component is how you render an array of fields (ref)

添加/删除示例代码:

// renderSubFields.js
const renderSubFields = (member, index, fields) => (
  <li key={index}>
    <button
      type="button"
      title="Remove Member"
      onClick={() => fields.remove(index)}
    />
    <h4>Member #{index + 1}</h4>
    <Field
      name={`${member}.firstName`}
      type="text"
      component={renderField}
      label="First Name"
    />
    <Field
      name={`${member}.lastName`}
      type="text"
      component={renderField}
      label="Last Name"
    />
  </li>
);

const renderMembers = ({ fields }) => (
  <ul>
    <button type="button" onClick={() => fields.push({})}>
      Add Member
    </button>
    {fields.map(renderSubFields)}
  </ul>
);

然后在您的向导页面中

<FieldArray name="members" component={renderMembers} />

这是一个演示:https://codesandbox.io/s/redux-form-wizard-example-m26bk?file=/WizardFormFirstPage.js:586-641

这篇关于连接向导到 redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！