时间戳

首页 > 解决方案 > 连接向导到 redux

javascript - 连接向导到 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 调用值。一旦我将获得它的价值。我想编辑它的值，并保存它的新值，这样每当我回到表单时，新值都应该保留

标签： javascriptreactjsredux

解决方案

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

您可以使用FieldArray. FieldArray 组件是您呈现字段数组的方式（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

推荐阅读