制御されたコンポーネントをあらかじめ入力する

Question

更新フォームを処理しようとしたところで、以下のコードを記述しました。対応する状態値を持つ、制御された入力コンポーネントです。入力コンポーネントで変更が発生すると、状態値が更新されます。これは、ビューは常にデータの変更を反映し、その逆も同様です。私の問題は、データベースからフェッチされたデータを入力コンポーネントにあらかじめ入力しようとするときに発生します。私の試みは、渡された小道具と等しいようにコンストラクタの初期状態値を定義することでしたが、それはうまくいきませんでした。コンポーネントが最初にレンダリングされるとき、コンポーネントはまだフェッチされていないので、渡されたspiritの小道具は含まれません。コンポーネントが2度目にレンダリングされると（データが準備されているため）、コンストラクタは呼び出されません。データの準備ができていないときに初期状態をどのように設定するのですか？

SpiritsEditContainer

export default createContainer(({params}) => { 
    const handle = Meteor.subscribe("spirit", params.id); 

    return { 
     loading: !handle.ready(), 
     spirit: Spirits.find(params.id).fetch()[0] 
    } 
}, SpiritsEditPage); 

SpiritsEditPage

export default class SpiritsEditPage extends Component { 
    constructor(props) { 
     super(props) 

     this.state = {name: this.props.spirit.name} 
    } 

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

    handleUpdate(event) { 
     event.preventDefault(); 
    } 

    render() { 
     const {name} = this.state; 

     if (this.props.loading) { 
      return <div>loading</div> 
     } else { 
      return (
       <div> 
        <h1>SpiritsEditPage</h1> 

        <form onSubmit={this.handleUpdate.bind(this)}> 
         <Input type="text" 
           label="Name" 
           value={name} 
           onChange={this.handleNameChange.bind(this)}/> 


         <button>Update</button> 
        </form> 
       </div> 
      ) 
     } 
    } 
} 

Answer 1

コンストラクタコードが正しく動作しない可能性があります代わりに

constructor(props) { 
     super(props) 

     this.state = {name: this.props.spirit.name} 
    } 

のAvaIするprops.spiritをチェックしますlable。

this.state = { name: this.props.spirit && this.props.spirit.name } 

componentWillReceivePropsを追加します。

componentWillReceiveProps(nextProps) { 
    if (nextProps.spirit !== this.props.spirit) { 
    this.setState({ name: nextProps.spirit.name }); 
    } 
} 

コードの残りの部分は大丈夫に見えます。