質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • React.js

    714questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Redux

    92questions

redux-formでうまく値を更新できません。

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 483

cloudspider

score 67

react,reduxを使ってアプリ開発をしています。
この度、redux-formを使うことになったのですが、うまく値を更新することができません。

import React from "react"
import {connect} from "react-redux"
import { Field, reduxForm, } from "redux-form"

import {Page,Toolbar,Navigator,BackButton,List,ListItem,ListHeader,Icon} from "react-onsenui"
import {Input,Button} from "react-materialize"

import * as AppActions from "../Actions/alertAction"
import {Input as Oinput} from "react-onsenui"

import OpinionPostGoPage from "../Containers/Setting"

function submitOpinionForm(values){
  console.log('to OpinionPostGoPage');
    this.props.navigator.pushPage({
        component: OpinionPostGoPage,
        props:{...this.props},
    })

  console.log(this.props.customers[0].yourName);
  console.log(this.props.customers[0].email);
  console.log(this.props.customers[0].requirement);
  console.log(this.props.customers[0].message);


const NameField = () => (
    <Input className="input-fields" s={10} label="your name"/>
)

const EmailField = () => (
    <Input className="input-fields" s={10} label="Email (任意)" type="email"/>
)

const RequirementField = () => (
    <Input s={10} type='select' label="種類を選択してください" defaultValue='1'>
        <option value="1">バグ・エラー</option>
        <option value="2">要望・意見</option>
        <option value="3">メンバー募集に関して</option>
        <option value="4">その他</option>
    </Input>
)

const MessageField = () => (
    <textarea cols="30" rows="50" placeholder="Message"></textarea>
)

class _OpinionForm extends React.Component {

    render() {
        const {
            handleSubmit,
            submitting
        } = this.props

        return(
            <div>
        <form onSubmit={handleSubmit}>
                    <Field
            component={NameField}
                        name="yourName"/>
                    <Field
            component={EmailField}
                        name="email"/>
                    <Field
            component={RequirementField}
                        name="requirement"/>
                    <Field
            component={MessageField}
                        name="message"/>
                </form>
                <Button
          onClick={submitOpinionForm.bind(this)}
                    waves="light"
                    type="submit"
                    >
                    <Icon icon="fa-paper-plane"/>
          submit
                </Button>
            </div>
        )
    }
}

const OpinionForm = reduxForm({
    form: "customerForm",
  onSubmit: submitOpinionForm,
    // validate
})(_OpinionForm)

const mapStateToProps = (state) => {
    return {
        customers: state.customers.customers
    }
}

const mapDispatchToProps = (dispatch) => {
    return{
        onSubmit(values){
            dispatch(AppActions.addCustomer(values))
        }
    }
}

export const CustomerFormContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(OpinionForm)

reducerの一部です。

import * as actionTypes from "../actionTypes"

const initialState = {
    customers: [
        { yourName: "test", email: "", requirement: "", message:""},
    ]
}

export const customersReducer = (state = initialState, action) => {
    switch (action.type) {
    case actionTypes.ADD_CUSTOMER:
        return Object.assign({}, state, {
            customers: [action.customer]
        })
    default:
        return state
    }
}

【実装したいこと】
submitボタンを押すと次のページに進み、そのときにconsoleに入力した値を表示したい。

【試したこと】
このページのコードを参考にして、コピペしてみたが、動かなかった
公式Documentのexampleを参考にしてみたが結局ちゃんと動かなかった
onSubmitやhandleSubmitの使い方や、使う場所(formタグかbuttonタグかなど)を試してみたがうまくいかなかった。

だいぶ格闘してみたのですが、情報が少なく行き詰まっています。
どなたかご存じの方がいらっしゃればご教示願えませんでしょうか。
よろしくお願いします

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

どういうエラーが起きているのかとか、エラーが起きないにしろ、どういう期待をしているものに対して、どういった出力が出てしまっているのかが書かれてないとよくわかりませんが、

Object.assign({}, state, {
            customers: [action.customer]
        })


は怪しい気がします。。。
[action.customer] の配列部分まではコピーされてないですよね?
Object.assing()はシャローコピーなので。
その辺りでおかしな挙動になってたりしませんか?

コード少し見ただけなので、気になった点だけお伝えする感じですが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

何かのお役に立てればと思います。
こちらは正常に動きます
https://github.com/kenmori/OmajimeDesign

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • React.js

    714questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Redux

    92questions