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

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

ただいまの
回答率

88.92%

render時の処理方法

解決済

回答 2

投稿

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

naonao11

score 89

render()を行う際にpropsの値をsetStateしたいのですが。うまくいきません。。。

今回自身が行いたいこと
編集ホームの作成

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';

import TitleField from './form/TitleField';
import SubmitButton from './form/SubmitButton';

import { Paper, Grid, Typography } from '@material-ui/core';

class editProduct extends Component{

  constructor(props){
   super(props);
    this.state = {
      data: {
        title: this.props.title
      }
    };
    this.checkValue = this.checkValue.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  checkValue(type, value){
    const data = {
        title: this.state.data.title
    };
    data[type] = value;
    this.setState({data: data});
  }

  handleSubmit(event){
    const {title} = this.state.data;
    this.props.onPut(event, this.props.match.params.id,  title);
  }

  render(){
    if(this.props.redirect) {
      return <Redirect to="/"/>
    }


    //productをこの画面にレンダリングした瞬間setStateしたい
    const { product } = this.props;

    //こいつを出したい
    // const { title } = this.state.data;
    return(
      <React.Fragment>
          <Paper>
        <Typography variant="h5">Edit Product</Typography>
        <Grid>
          <Grid>
            <TitleField onCheckValue={this.checkValue.bind(this)} title={product.title}/>
          </Grid>
          <Grid>
            <SubmitButton onSubmit={this.handleSubmit.bind(this)}/>
          </Grid>
        </Grid>
      </Paper>
      </React.Fragment>
    );
  }

}
export default editProduct;


//inputFormについて
import React from 'react';
import { Input } from '@material-ui/core';

const TitleField = (props) => {
  const handleCheckValue = (event) => {
    const type = event.target.name;
    const value = event.target.value;
    props.onCheckValue(type, value, event);
  }

  return(
    <Input
       value={props.title}
       onChange={handleCheckValue}
    />
  );
}

export default TitleField;


現状だと、inputタグに打ち込むことができません。
ご助力よろしくお願いいたします。。。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

render()を行う際にpropsの値をsetStateしたい

componentDidUpdate を利用可能かと存じます。
こちらは、render後に呼ばれる関数となります。厳密にいうと実行順序としては
render() → componentDidUpdate() となります。

詳細はマニュアルをご参照ください。

マニュアル:
https://reactjs.org/docs/react-component.html#componentdidmount
https://reactjs.org/docs/react-component.html#componentdidupdate

例:

componentDidUpdate(prevProps) {
  if (prevProps.product !== this.props.product) {  
    this.setState({…});   // this.props.product をsetState
  }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

親のコンポーネントから、初期値を設定する場合は、valueではなくdefaultValueを使うと良いです。

return(
    <Input
       defaultValue={props.title}
       onChange={handleCheckValue}
    />
  );

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/07 16:39

    ありがとうございます!
    defaultValueにするとproductのデータを取ってこなくなってしまいました。。。

    キャンセル

  • 2019/03/08 01:16

    入力はできるようになった、という事でしょうか?
    productは見たところeditProductコンポーネントのさらに親のコンポーネントから渡されているようですが、それは正常に渡されていますでしょうか?

    キャンセル

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

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

関連した質問

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