設定と状態を更新するには、ドロップダウンコンポーネントとJSに反応材質UIから

Question

私は私が欲しいもの

、Webサービスを呼び出し、マテリアルUIからのドロップダウンコンポーネントにそのWSから来る名前が表示され、コードのこの部分を持っていますWSの最初の要素でドロップダウンのデフォルト値を設定し、ドロップダウンで任意のオプションを選択できるようにするために、 "州"について読んでいますが、本当にうまくいきませんコードレベル。

私は自分自身で反応し、学習するのが初めてですが、いくつかの助けがうまくいくでしょう。

import React, { Component } from 'react'; 
    import DropDownMenu from 'material-ui/DropDownMenu'; 
    import MenuItem from 'material-ui/MenuItem'; 

    export default class WebserviceTest extends Component { 

     constructor(props) { 
     super(props); 
     this.state = { 
     data: [], 
     }; 
     this.renderOptions = this.renderOptions.bind(this); 
    } 

    componentDidMount() { 
    const url = 'https://randomuser.me/api/?results=4'; 

    fetch(url) 
     .then(Response => Response.json()) 
     .then(findResponse => { 
     console.log(findResponse); 
     this.setState({ 
      data: findResponse.results 
     }); 
     }); 
    } 
    //will set wahtever item the user selects in the dropdown 
    handleChange(event, index, value) {this.setState({ value });} 
    //we are creating the options to be displayed 
    renderOptions() { 
    return this.state.data.map((dt, i) => { 
     return (
     <div key={i}> 
      <MenuItem 
      label="Select a description" 
      value={dt.name.first} 
      primaryText={dt.name.first} /> 
     </div> 
     ); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <DropDownMenu value={this.state.name} onChange={this.handleChange}> 
      {this.renderOptions()} 
     </DropDownMenu> 
     </div> 
    ); 
    } 
    } 

ありがとうございます。

よろしくお願いいたします。

Answer 1

選択したドロップダウンオプションの状態を設定する必要があります。データの最初の値を選択値として設定します。

componentDidMount() { 
const url = 'https://randomuser.me/api/?results=4'; 

fetch(url) 
    .then(Response => Response.json()) 
    .then(findResponse => { 
    console.log(findResponse); 
    this.setState({ 
     data: findResponse.results, 
     selected: findResponse.results[0].name.first // need to be sure it's exist 
    }); 
    }); 
} 
handleChange(event, index, value) {this.setState({ selected: value });} 
. 
. 
. 
render() { 
return (
    <div> 
    <DropDownMenu value={this.state.selected} onChange={this.handleChange}> 
     {this.renderOptions()} 
    </DropDownMenu> 
    </div> 
); 

}

更新されたコード

import React, { Component } from 'react'; 
import DropDownMenu from 'material-ui/DropDownMenu'; 
import MenuItem from 'material-ui/MenuItem'; 

export default class WebserviceTest extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: [], 
     selected: '', 
    }; 
    this.renderOptions = this.renderOptions.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    componentDidMount() { 
    const url = 'https://randomuser.me/api/?results=4'; 

    fetch(url) 
     .then(Response => Response.json()) 
     .then(findResponse => { 
     console.log(findResponse); 
     console.log(findResponse.results[0].name.first); 
     this.setState({ 
      data: findResponse.results, 
      selected: findResponse.results[0].name.first // need to be sure it's exist 
     }); 
     }); 
    } 
    handleChange(value) {this.setState({ selected: value });} 

    //we are creating the options to be displayed 
    renderOptions() { 
    return this.state.data.map((dt, i) => { 
     return (
     <div key={i}> 
      <MenuItem 
      value={dt.name.first} 
      primaryText={dt.name.first} /> 
     </div> 
    ); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <DropDownMenu value={this.state.selected} onChange={this.handleChange}> 
      {this.renderOptions()} 
     </DropDownMenu> 
     </div> 
    ); 
    } 
} 

Answer 2

this.setStateは、変数this.stateを特別な方法で制御します。 this.setStateを使用するたびに、renderが再度実行され、それに応じて変更が確認されます。応答したい動的コンテンツはthis.stateに配置し、それらはrender関数に表示する必要があります。

あなたの質問を解決する方法はたくさんありますが、使用するための最も重要な原則は、this.stateに現在レンダリングするもの（またはID /インデックス番号）を置き、必要に応じてthis.setStateを使用します。

value={this.state.name}は、fetchから返されたデータ構造の単一の値である必要があります。これは画面に表示されているものとします。

また、コンストラクタでbindthis.handleChangeを忘れた場合。

コンストラクタ内にpropsと記載するのは、まあまあです。コンストラクタでthis.propsのものを使用する場合にのみ行います。あなたはそうではないので、それをそのまま残しても安全です。constructor()とsuper()