React：状態の設定と小文字からのデフォルト入力

Question

ユーザーが評価を作成できるようにする（他のユーザーが完了できるようにする）アプリケーションを作成しています。今、私は、ユーザーが関連するデータがあらかじめ入力されたフォームをロードする「編集」ページを作成していますが、これらの値を変更することはできます。

しかし、私は2つの問題（私は関連していると思われる）に問題があります。 最初に、入力フィールドにはコンポーネントの状態から派生したデフォルト値が表示されません。

2番目：入力フィールドを直接小道具から設定した場合、値を変更できなくなりました。

コンポーネントには、block_dataと呼ばれる小道具が渡されます。これは、文字列のキーと値のペアを含む辞書です。

私はしかし、これは動作しませんので、

constructor(props) { 
    super(props); 

    this.state = { 
     block: this.props.block_data, 
     question_list: [], 
     question_options: ['BO', 'SC', 'SR', 'NO'], 
     block_list: [], 
    }; 
    (..) 
} 

のような状態に負荷にそれを変換しようとしています。 Chromeの反応拡張機能をチェックインすると、状態は設定されません。

入力フィールドは、以下に含まれる例と非常に似ています。ここで私は小道具からその価値を設定しました。この場合、正しい初期データが表示されます。しかし、私はそれを編集することができません。

<input 
    onChange={e => this.changeIsANaturalPartOfLife(e)} 
    value={this.props.block_data.title} 
    name="title" 
    /> 

以下は「変更時」機能です。クロム反応ツールをチェックすると、入力を開始したときに状態の最初の文字だけが更新されていることがわかります。入力フィールドには変更が表示されません。

changeIsANaturalPartOfLife(e, optional) { 

    const target = e.target; 
    const name = target.name; 
    const value = target.value; 
    console.log(value); 
    this.setState({ block: {[name]: value }}); 

} 

私は実際に何をすべきかについて迷っています。私がここでやろうとしていることは十分に単純なようですが、私はこの欠陥のある段階を超えて進めることができません。誰かが私が間違っているアイデアを持っていますか？

Answer 1

コメントに記載されているとおり、「データはDjangoRestAPIから読み込まれています」最初の問題の

解決策：新しい小道具値（サーバーから正常にフェッチ後）での状態を更新するためにcomponentwillreceivepropsライフサイクルメソッドを使用する必要が

そうでない子コンポーネントの状態は、常に親の初期データを持っています成分。

DOC

あたりとおり

componentWillReceiveProps（）新しい小道具を受信 実装部品前に呼び出されます。 の変更に応じて状態を更新する必要がある場合は、 とnextPropsを比較し、 でthis.setState（）を使用して状態遷移を実行することができます。

このメソッドを使用：

あなたが直接小道具を使用して代わりの状態に保存され、その後、あなたは親の値を更新する必要があります。第二の問題の

componentwillreceiveprops(nextProps) { 
    // compare nextProps.block_data and this.state.block if not equal 
    this.setState({ 
     block: nextProps.block_data 
    }) 
} 

ソリューションあなたがthis.props.valueを使用しており、this.state.valueを更新しているので、props.valueは常に同じで、何も入力することができないため、onChange中のコンポーネントです。