在 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

Answer 1

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

o.link === this.state.selectedOption.value 的检查出错了。

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

Answer 2

最好的方法不是在 render 方法中。

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

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

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

旁注：这使用不可变的 setState（我认为这很重要，因为您从示例中的 options2 创建了一个新的过滤数组）。如果你想遵循更实用的模式，你可以在你的渲染方法中进行过滤（尽管我不推荐它）。如果您决定在渲染方法内部进行过滤，请考虑使用 React 16.7（目前处于 Alpha 版）中的记忆技术。

Answer 3

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

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