javascript - 在 React 中映射过滤后的数组

Question

我制作了一个包含两个下拉列表的组件。第二个下拉菜单中的选项应该根据第一个下拉菜单中的选定选项进行过滤。

现在，我想映射一个存储在 const 中的过滤数组，类似于我映射 options1 的方式：

render() {

const options1 = [
   {value: 'one', label: 'One'},
   {value: 'two', label: 'Two'}
];



const options2 = [
   {value: 'one-a', label: 'One A', link: 'one'},
   {value: 'one-b', label: 'One B', link: 'one'},
   {value: 'two-a', label: 'Two A', link: 'two'},
   {value: 'two-b', label: 'Two B', link: 'two'}
];

const filteredOptions = options2.filter(o => o.link === this.state.selectedOption.value);

return (
<div style={style}>
   <div>
      <label>Select one</label>
      <select 
         value={this.state.selectedOption.value} 
         onChange={this.handleChange1} 
      >
         {options1.map(tag => <option>{tag.value}</option>)}
      </select>

   </div>
   <div>
      <label>Then the other</label>
      <select
         value={this.state.selectedOption2.value}
         onChange={this.handleChange2}
      >
         {filteredOptions.map(tag => <option>{tag.value}</option>)}
      </select>

   </div>
</div>
)
}

options1 的第一个映射工作得很好。但是，对于过滤选项的映射，我的选择标记被呈现为空。

我不知道为什么它不起作用。有人碰巧有想法吗？

完整代码：https ://www.codepile.net/pile/evNqergA

标签： javascriptreactjsdictionaryfilterrender

Answer 1

这是您正在尝试做的工作示例。

import React, { Component } from "react";

const options1 = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" }
];

const options2 = [
  { value: "one-a", label: "One A", link: "one" },
  { value: "one-b", label: "One B", link: "one" },
  { value: "two-a", label: "Two A", link: "two" },
  { value: "two-b", label: "Two B", link: "two" }
];

export default class SelectsComponent extends Component {
  handleChange1 = e => {
    console.log(e);
    this.setState({
      selectedOption: { value: e.target.value }
    });
  };

  handleChange2 = e => {
    this.setState({
      selectedOption2: { value: e.target.value }
    });
  };

  constructor(props) {
    super(props);
    this.state = {
      selectedOption: { value: "one" },
      selectedOption2: { value: "one-a" }
    };
  }

  render() {
    const filteredOptions = options2.filter(
      o => o.link === this.state.selectedOption.value
    );

    return (
      <div>
        <div>
          <label>Select one</label>
          <select
            value={this.state.selectedOption.value}
            onChange={this.handleChange1}
          >
            {options1.map(tag => (
              <option>{tag.value}</option>
            ))}
          </select>
        </div>
        <div>
          <label>Then the other</label>
          <select
            value={this.state.selectedOption2.value}
            onChange={this.handleChange2}
          >
            {filteredOptions.map(tag => (
              <option>{tag.value}</option>
            ))}
          </select>
        </div>
      </div>
    );
  }
}