Question

我有一个Picker，其列表根据之前选择的内容动态加载。当我从列表中选择一个值时，我想将其移动到另一个列表并从选项中删除它。问题在于，当我选择一个选项时，每次由于setState重新呈现列表时，它都会选择最顶层的值，并触发该值的onValueChange。这会导致每个值触发事件并每次清空列表。

我已经尝试将选择器分成它自己的组件，我已经尝试了它有和没有默认选择值，我已经将所选值设置为最高值，null，undefined，你命名它。我无法弄清楚当我重新加载列表时如何防止此事件被触发。

取following demo app，例如：

import React, { Component } from 'react';
import {
  AppRegistry,
  Picker,
  Text,
  View
} from 'react-native';

export default class Sandbox extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [
        {id: 1, title: "One"},
        {id: 2, title: "Two"},
        {id: 3, title: "Three"},
        {id: 4, title: "Four"},
      ],
      selected: []
    };
  }

  updateLists(id) {
    var list = this.state.list;
    var selected = this.state.selected
    for(var i = 0; i < list.length; i++) {
      var obj = list[i];
      if(obj.id == id) {
        selected.push(obj);
        list.splice(i, 1)
      }
    }

    this.setState({ list: list, selected: selected });
  }

  render() {
    return (
      <View>
        <Picker
          onValueChange={(id) => {
            this.updateLists(id);
          }}>
          {this.state.list.map((item, index) => {
                return <Picker.Item key={index} label={item.title} value={item.id} />
            })}
        </Picker>
        <Text>{this.state.selected.toString()}</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('Sandbox', () => Sandbox);

从该列表中选择任何值将触发每个值的updateLists()方法，直到它们全部被删除。使用附加的RN Play链接，我发现这似乎只是Android问题。 iOS工作（大部分）很好。

使用动态列表触发器onValueChange的选择器 - React Native（Android）

0 个答案: