Javascript 在React中映射过滤后的数组

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

现在，我想将存储在常量中的过滤数组映射为映射选项1的方式：

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

选项1的第一个映射工作得很好。但是，对于filteredOptions的映射，我的select标记将呈现为空

我不知道为什么它不起作用。有人有主意吗

完整代码：

在您的场景中，filteredOptions将是一个空数组

检查o.link==this.state.selectedOption.value时出错

---

检查this.state.selectedOption.value的值，该值设置不正确。

执行此操作的最佳方法不是在渲染方法内部

1将数组移动到状态或其他实例成员中 2确保只触发一次排序

this.setState(lastState => ({
  ...lastState,
  options2: lastState.options2.filter(yourFilterFn)
}))

3将过滤后的数组映射到渲染方法内部的JSX中

旁注：这使用了不可变的setState，如果您从示例中的选项2中创建了一个新的过滤数组，那么我收集的设置状态非常重要。如果您想遵循更具功能性的模式，可以在渲染方法内部进行过滤，尽管我不建议这样做。如果你决定在你的渲染方法中过滤，考虑使用来自当前Alpha中的Read 16.7的MeaTi化技术。

< P>一个你想要做的工作例子。

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

---

this.state.selectedOption是如何初始化的？我认为出于某种原因，this.state.selectedOption是空的，您能分享完整的代码吗please@OriEng我在我的问题中添加了完整代码的链接。@Emilie你能告诉我你在这里得到了什么值吗？handleChange1selectedOption，我的意思是当您更改select上的值时，“selectedOption”是什么？我认为这是一个错误的值，您唯一需要更改的是选择option.target.value这个实现非常有效。非常感谢你@Emilie别忘了投票并标记为正确答案；谢谢