材料の値をマップする方法オートコンプリート

Question

「アー」にファイアベースのデータがありますが、どのように材料-uiオートコンプリートを使用できますか？どうすればAuto-Completeフィールドに "arr"データをマップできますか？

"arr"にfirebaseのデータがありますが、どのようにmaterial-ui Auto-Completeを使用できますか？どうすればAuto-Completeフィールドに "arr"データをマップできますか？

Answer 1

import React, { Component } from 'react' 
import { Link, browserHistory } from 'react-router'; 
import { connect } from 'react-redux' 
import RaisedButton from 'material-ui/RaisedButton'; 
import { DBfirebase } from '../../Database/DBfirebase' 
import { signUp } from '../../Store/Actions/Auth' 
import TextField from 'material-ui/TextField'; 
import AppBar from 'material-ui/AppBar'; 
import SelectField from 'material-ui/SelectField'; 
import MenuItem from 'material-ui/MenuItem'; 
import AutoComplete from 'material-ui/AutoComplete'; 
import * as firebase from 'firebase'; 
import { Search } from '../../Store/Actions/Auth' 


class AddProduct extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      arr: [], 
      productName: '', 
      description: '', 
      company:'' 

     } 
     this.submit = this.submit.bind(this); 
     this.inputHandler = this.inputHandler.bind(this); 
     this.onSearch = this.onSearch.bind(this); 
     this.handleUpdateInput = this.handleUpdateInput.bind(this); 
    } 
    inputHandler(e) { 
     this.setState({ 
      [e.target.name]: e.target.value 
     }) 
    } 
    submit(e) { 
     e.preventDefault(); 
     let multipath = {}; 
     let productDetails = { 
      productName: this.state.productName, 
      description: this.state.description, 
      company: this.state.company, 
     } 
     console.log(productDetails) 
     DBfirebase.refAddProduct.push(productDetails); 
     browserHistory.push('/home/view-purchases') 

    } 

//working code 
    onSearch(e) { 
     let _self = this; 
     // e.preventDefault() 
     let ref = firebase.database().ref().child('/AddedProducts/'); 
     _self.arr = []; 

     // console.log(this.refs.selectedCity.value) 
     // ref.orderByChild('city').equalTo(this.refs.selectedCity.value).once('value', function (snapshot) { 
    ref.once('value', function (snapshot) { 



      snapshot.forEach(childSnapshot => { 

       _self.arr.push(childSnapshot.val()) 
       console.log("arr", _self.arr) 

      }) 
      _self.props.serachProducts(_self.arr) 
      _self.setState({ 
       arr: _self.props.storeReducer.products 

      }) 
     }); 
    } 

    componentWillMount(){ 
     this.onSearch(); 
    } 


    render() { 
     return (
      <div ><center> 
       <AddProductForm signUpState={this.state} _inputHandler={this.inputHandler} _submit={this.submit} /> 
      </center> 
      </div> 
     ); 
    } 
} 

// AddProduct.contextTypes = { 
//  router: React.PropTypes.object.isRequired 
// } 

class AddProductForm extends React.Component { 


    render() { 
     console.log("this.props.signUpState.arr",this.props.signUpState.arr) 

    { this.props.signUpState.arr.map((v, i) => { 
              return (
               datasource.push(v.productName) 
              ) 
             })} 

     return (
      <div > 

       <h1>Add New Product</h1> 
       <form onSubmit={this.props._submit} > 
        <AutoComplete 
      hintText="Product Name" 
      filter={AutoComplete.noFilter} 
      openOnFocus={true} 
     // dataSource={this.props.signUpState.arr} 
      dataSource={datasource} 
     // onUpdateInput={this.props.signUpState.handleUpdateInput} 
     // dataSourceConfig={dataSourceConfig} 
     /> 
        <TextField 
         hintText="Product Name" 
         name="productName" 
         value={this.props.signUpState.productName} 
        floatingLabelText="Product Name" 
         onChange={this.props._inputHandler} 
         /><br /><br /> 

        <TextField 
         type="text" 
         hintText="description" 
         name="description" 
         value={this.props.signUpState.description} 
         floatingLabelText="description" 
         onChange={this.props._inputHandler} 
         /><br /><br /> 


         <TextField 
         type="text" 
         hintText="company" 
         name="company" 
         value={this.props.signUpState.company} 
         floatingLabelText="company" 
         onChange={this.props._inputHandler} 
         /><br /> 
         <br /> 

       <RaisedButton type="submit" label="Add Product" primary={false} secondary={true} /> <br /><br /> 
       </form> 

      </div> 
     ) 
    } 
} 

AddProductForm.PropTypes = { 
    _inputHandler: React.PropTypes.func.isRequired, 
    _submit: React.PropTypes.func.isRequired 

} 

const mapStateToProps = (state) => { 
    console.log(state.ProductReducer) 
    return { 
     storeReducer: state.ProductReducer 
    } 
} 
const mapDispatchToProps = (dispatch) => { 
     return { 
     serachProducts: (data) => { 
      console.log(data) 
      dispatch(Search(data)) 
     } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(AddProduct); 

Answer 2

実際にFirebaseのデータがオブジェクトに入っています...まずObject.keys（objectname）を使ってオブジェクトのキーを取得し、Arrayのすべてのキーを保存します。オブジェクトのキーを取得した後、キーの配列マップ内では、obj [keys]のようなキーでオブジェクトを呼び出します..