Get.filter mit .map aus JSON-Objekt in React.Js arbeiten

Question

Ich versuche, meine zweite Dropdown-Liste auffüllen, basierend auf was im ersten Dropdown ausgewählt ist.

Die erste Dropdownliste listet die tableName s aus dem JSON unten auf. Ich möchte, dass das zweite Dropdown-Feld columns für das ausgewählte tableName ist.

Für jetzt, obwohl ich wollte nur eine Liste der columns wo tableName == 'customer'.

Ich versuche, die .filter Methode zusammen mit der .map Methode zu verwenden, um dies zu erreichen, aber das zweite Dropdown ist leer. Hier wird der aktuelle Code, den ich habe:

import React from 'react'; 
import axios from 'axios'; 
class Search extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     Params: [], 
     ColumnParams: [] 
    } 
    } 
    componentWillMount() { 
    axios.get('http://localhost:3010/api/schema') 
    .then(response => { 
     this.setState({Params: response.data}) 
    }) 
    } 
    render() { 
    return (
     <div className="Search"> 
     <select>{this.state.Params.map((param, i) => 
      <option key={i}>{param.tableName}</option>)} 
     </select> 
     <select>{this.state.Params.filter(tn => tn === "customer").map(param => 
      <option>{param}</option>)} 

Und hier ist die JSON:

[ 
    { 
    "tableName": "customer", 
    "columns": [ 
     "customerid", 
     "title", 
     "prefix", 
     "firstname", 
     "lastname", 
     "suffix", 
     "phone", 
     "email" 
    ] 
    }, 
    { 
    "tableName": "product", 
    "columns": [ 
     "productid", 
     "name", 
     "color", 
     "price", 
     "productadjective", 
     "productmaterial" 
    ] 
    } 
] 

Answer 1

Params in Ihrem Zustand ist ein Array von Objekten, sondern in Ihrem Filter Sie versuchen, es mit einer Schnur zu vergleichen .

Versuchen

.filter(({tableName}) => tableName === 'customer') 
.map(({columns}) => 
    columns.map((col) => 
     <option>{col}</option>))} 

statt.

Answer 2

die JSON Gegeben:

import React from 'react'; 
import axios from 'axios'; 

class Search extends React.Component { 

    constructor(props) { 
     super(props) 
     this.state = { 
      params: [], 
      columnParams: [] 
     } 
    } 

    componentWillMount() { 
     axios 
     .get('http://localhost:3010/api/schema') 
     .then(response => this.setState({params: response.data})) 
    } 

    render() { 
     const tableNames = this.state.params 
      .map(({tableName}, i) => <option key={i}>{tableName}</option>); 
     const params = this.state.params 
      .filter({tableName} => tableName === "customer") 
      .map({columns} => <option>{columns}</option>); 

     return (
      <div className="Search"> 
       <select>{tableNames}</select> 
       <select>{params}</select> 
      </div> 
     ) 
    } 
} 

Sie können weitere Details sehen here:

[ 
    { 
     "tableName": "customer", 
     "columns": [ 
      "customerid", 
      "title", 
      "prefix", 
      "firstname", 
      "lastname", 
      "suffix", 
      "phone", 
      "email" 
     ] 
    }, 
    { 
     "tableName": "product", 
     "columns": [ 
      "productid", 
      "name", 
      "color", 
      "price", 
      "productadjective", 
      "productmaterial" 
     ] 
    } 
] 

Ihr Vergleich in der Filtermethode falsch ist, können Sie Destrukturierung Zuordnung verwenden ändern.

Answer 3

Eine potenziell bessere Lösung ist die Verwendung reduce:

.reduce((options, { tableName, columns }) => { 
    if (tableName === 'customer') options.push(<option>{columns}</option>) 
    return options           
}, [])