Question

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

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

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的第一个映射工作正常。但是，我的select标记在为filteredOptions进行映射时变为空白。

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

完整代码：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创建了一个新的过滤数组，因此我收集这一点很重要）。如果您想遵循更多的功能模式，则可以在render方法中进行过滤（尽管我不建议这样做）。如果您决定在自己的渲染方法中进行过滤，请考虑使用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>
    );
  }
}

在React中映射一个过滤后的数组

3 个答案: