如何使用props在React中自動填充可編輯的redux-form字段？

Question

我是React的新手，所以我試圖盡可能多地顯示代碼，希望能夠解決這個問題！ 基本上我只想填寫表單字段，其中包含我從另一個API獲取的對象的屬性。 該對象存儲在autoFill reducer中。 例如，我想用autoFill.volumeInfo.title填充輸入，用戶可以在提交之前更改值，如果需要的話。

我使用了autoFill動作創建器中的mapDispatchtoProps，但是this.props.autoFill仍然在FillForm組件中顯示為undefined。 我也對如何再次使用道具提交表單感到困惑。 謝謝！

我的減速機：

import { AUTO_FILL } from '../actions/index';

export default function(state = null, action) {
  switch(action.type) {
  case AUTO_FILL:
      return action.payload;
  }

  return state;
}

行動創造者：

export const AUTO_FILL = 'AUTO_FILL';

export function autoFill(data) {

  return {
    type: AUTO_FILL,
    payload: data
  }
}

調用autoFill動作創建者：

class SelectBook extends Component {
   render() {

     return (

      ....

     <button
       className="btn btn-primary"
       onClick={() => this.props.autoFill(this.props.result)}>
       Next
     </button>
    );
   }
}

....

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ autoFill }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SelectBook);

以下是問題所在的實際表格：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { createBook } from '../actions/index;

class FillForm extends Component {

  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  onSubmit(props) {
   this.props.createBook(props)
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() { 

    const { fields: { title }, handleSubmit } = this.props;

    return (

       <form {...initialValues} onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <input type="text" className="form-control" name="title" {...title} />
          <button type="submit">Submit</button>
       </form>
      )
   }

  export default reduxForm({
    form: 'AutoForm',
    fields: ['title']
  },
  state => ({
    initialValues: {
      title: state.autoFill.volumeInfo.title
    }
  }), {createBook})(FillForm)

Answer 1

我認為你在實際的表單組件中混合了connect和reduxForm裝飾器。 目前您的代碼看起來像這樣（我添加的注釋）：

export default reduxForm({
  // redux form options
  form: 'AutoForm',
  fields: ['title']
},

// is this supposed to be mapStateToProps?
state => ({
  initialValues: {
    title: state.autoFill.volumeInfo.title
  }
}),
/// and is this mapDispatchToProps?
{createBook})(FillForm)

如果是這種情況，那么修復應該像使用connect裝飾器一樣簡單（我還建議將這個連接道具分離到它們自己的變量，以盡量減少這種混淆）：

const mapStateToProps = state => ({
  initialValues: {
    title: state.autoFill.volumeInfo.title
  }
})

const mapDispatchToProps = { createBook }

export default connect(mapStateToProps, mapDispatchToProps)(
  reduxForm({ form: 'AutoForm', fields: ['title'] })(FillForm)
)

希望這可以幫助！