使用redux form Initialize函数和GET请求初始化表单值

npm install redux-form axios

import React, { useEffect } from 'react';
import { Field, reduxForm, initialize } from 'redux-form';
import axios from 'axios';

const MyForm = ({ handleSubmit, initialize }) => {
  useEffect(() => {
    // 在组件加载时发送GET请求获取初始值
    axios.get('/api/formdata')
      .then(response => {
        // 将获取到的初始值填充到表单中
        initialize(response.data);
      })
      .catch(error => {
        console.error('Failed to fetch initial form data:', error);
      });
  }, [initialize]);

  const onSubmit = (values) => {
    // 处理表单提交
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name:</label>
        <Field name="name" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <Field name="email" component="input" type="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default reduxForm({
  form: 'myForm' // 表单名称
})(MyForm);

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import MyForm from './MyForm';

const store = createStore(/* Redux store configuration */);

ReactDOM.render(
  <Provider store={store}>
    <MyForm />
  </Provider>,
  document.getElementById('root')
);