Reactで編集可能なredux-formフィールドを自動入力するためにpropsを使用するにはどうすればよいですか？

Question

私はリアクションには新しいので、ここでできるだけ多くのコードを表示して、うまくいけばそれを理解しようとしました！基本的には、別のAPIからフェッチしたオブジェクトのプロパティをフォームフィールドに入力したいだけです。オブジェクトはオートフィル減速機に保存されます。たとえば、autoFill.volumeInfo.titleを使用して入力を入力したい場合は、ユーザーが送信する前に値を変更することができます。

autoFillアクション作成者からmapDispatchPropsを使用しましたが、this.props.autoFillはまだFillFormコンポーネントに未定義として表示されています。私はまた、フォームを提出するために小道具を再び使用する方法についても混乱しています。ありがとう！

マイ減速：

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

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

    return state; 
} 

アクション作成者：autoFillのアクションの作成者を呼び出し

export const AUTO_FILL = 'AUTO_FILL'; 

export function autoFill(data) { 

    return { 
    type: AUTO_FILL, 
    payload: data 
    } 
} 

：

：

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) 
) 

この情報がお役に立てば幸い！