更新

Question

我有React docs的以下代码。唯一的区别是我使用了多重选择：

class App extends React.Component {
  handleChange = (event) => {
    const { options } = event.target;
    const keys = Object.keys(options)
    let values = keys.map(k => {
      if (options[k].selected) {
        return options[k].value
      }
    });

    console.log(values);
  }

  render() {
    return (
      <form>
        <label>
          Pick your favorite La Croix flavor:
        </label>
        <select multiple onChange={this.handleChange}>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
          <option value="mango">Mango</option>
        </select>
      </form>
    );
  }
}

点击例如＆＃34; lime＆＃34;，控制台输出是：

[null, "lime", Object, Object]

为什么values数组以这种方式填充，而不仅仅是["lime"]？

示例代码here。

更新

这似乎是StackBlitz的某种问题，因为它与JSFiddle和CodeSandbox一样正常工作。我已经开了一个问题here。谢谢你的答案！

Answer 1

你不应该留下对象（我不是），我得到的是未定义的。那是因为你要映射所有元素，而非选择元素你没有返回任何东西（所以你要返回undefined）。

您可以过滤掉那些未定义的项目：

const values = keys
  .filter(k => options[k].selected)
  .map(k => options[k].value);

或者您可以使用reduce：

在一个操作中执行此操作

const values = keys.reduce((arr, k) =>
  options[k].selected ? [...arr, options[k].value] : arr, []
);

或者你可以使用传统的循环并在满足条件的情况下继续使用数组。

Answer 2

我在jsfiddle上运行了你的代码，我只在日志中得到未定义的值，因为如果没有选择，map函数返回undefined。

let values = keys.map(k => {
  if (options[k].selected) {
    return options[k].value
  }
});

返回[undefined, "lime", undefined, undefined]

Answer 3

对代码进行小修改，如果未选择则返回空白值，然后在结尾处应用过滤器

class App extends React.Component {
  handleChange = (event) => {
    const { options } = event.target;
    const keys = Object.keys(options)
    let v=''; 
    let values = keys.map(k => {
      if (options[k].selected) {
         v=options[k].value
      }
      else{
        v='';
      }
      return v
    })

    console.log(values.filter(x => x != ''));
  }

Answer 4

在map回调中，您并不总是返回值，因此会生成undefined个值。

您可以链接Array.from，filter和map：

let values = Array.from(event.target.options)
                  .filter(opt => opt.selected)
                  .map(opt => opt.value);

为什么这个数组以这种方式填充？

更新

4 个答案: