javascript - 让 .filter 与 React.Js 中的 JSON 对象中的 .map 一起使用

Question

我正在尝试根据第一个下拉列表中选择的内容填充第二个下拉列表。

第一个下拉列表列出了下面 JSON 中的 tableName。我希望第二个下拉列表是所选 tableName 的 columns。

目前，我只想查看其中 tableName == 'customer' 的列的列表。

我尝试使用 .filter 方法和 .map 方法来完成此操作，但第二个下拉列表为空。这是我当前的代码:

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

这是 JSON:

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

Answer 1

Params 在您的状态中是一个对象数组，但在您的过滤器中您试图将其与字符串进行比较。

尝试

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

相反。