render時の処理方法

Question

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タグに打ち込むことができません。
ご助力よろしくお願いいたします。。。

Answer 1

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

Answer 2

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

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

Comments

[naonao11]

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

[noka_blank]

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