从React.Js中的JSON对象获取.filter与.map一起使用

Question

I am trying to get my second dropdown to populate based on what is selected in the first dropdown.

The first dropdown lists the tableName s from the JSON below. I want the second dropdown to be columns for the selected tableName .

For now though I just wanted to see a list of the columns where tableName == 'customer' .

I am trying to use the .filter method along with the .map method to accomplish this, but the second dropdown is empty. Here is the current code I have:

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>)}

And here is the 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 your state is an array of objects but in your filter you are trying to compare it with a string.

Try

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

instead.

Answer 2

A potentially better solution is to use reduce :

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

Answer 3

Given the JSON:

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

Your comparison in the filter method is wrong, you can change to use destructuring assignment :

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>
        )
    }
}

You can see more details here .