ReactJS - 動的にjsonschemaドロップダウンを更新します。

Question

私は数多くの投稿を見て、何か小さいものが見つからないように感じています。私はコンポーネントクラスの前にいくつかのドロップダウンが定義されたjsonschemaフォームを持っています。それらを設定するには、componentDidMountにフェッチを使用し、ドロップダウンの列挙型に返された値をプッシュします。レンダー時にドロップダウンは空ですが、別のタブをクリックして戻ると、ドロップダウンに値が入力されます。最初のレンダリング時にどのように表示されるのですか？以下のコード。

jsonschema：

const schema = { 
    type: 'object', 
    required: ['contextID'], 
    properties: { 
    contextID: { type: 'string', title: 'Context ID, enum: [], enumNames: [] }  
    } 
} 

componentDidMountは、フェッチ：

}).then(function(json) { 
    this.setState({contextIDArray: json.List},() => { 
    schema.properties.contextID.enumNames.push(this.state.contextIDArray); 
    schema.properties.contextID.enum.push(this.state.contextIDArray); 
    console.log("SCHEMA:: ", schema.properties.contextID.enumNames); 
    }); 
}.bind(this)).catch(() => { 
    this.setState({ 
    value: 'no response - cb catch' 
    }) 
}) 

Answer 1

をあなたはそれはあなたがDOMに変更をレンダリングする場合、状態オブジェクトをする必要があるコンポーネント内のオブジェクトを変更しようとしている場合そのコンポーネントで状態オブジェクトを作成し、コンストラクタで状態を設定し、それを更新した後にフォームにフォームとして渡します。あなたの関数では、このような

何か：

render() { 

    return (
     <div className="container"> 
      <Form 
       schema={this.state.schemaState} 
      /> 
     </div> 
     ) 
     } 

これはDOMを再描画します：

}).then(function(json) { 
this.setState({contextIDArray: json.List},() => { 
schema.properties.contextID.enumNames.push(this.state.contextIDArray); 
schema.properties.contextID.enum.push(this.state.contextIDArray); 
this.setState({schemaState: schema}); 
}); 
}.bind(this)).catch(() => { 
this.setState({ 
    value: 'no response - cb catch' 
}) 
}) 

、あなたの中のようなものをレンダリングします。ドロップダウンを更新する必要があります。