Question

我需要在配置文件屏幕中使用它，并且已经填充了要更新的数据。

库版本

{
    "@expo/samples": "2.1.1",
    "@mapbox/geo-viewport": "^0.4.0",
    "expo": "^30.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "react-native-autocomplete-input": "^3.6.0",
    "react-native-blur": "^3.2.2",
    "react-native-elements": "^0.19.1",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-multiple-select": "^0.4.4",
    "react-native-storage": "^1.0.0-beta.1",
    "react-navigation": "^2.9.3"
  }

预期行为

它应该显示选定的项目编号，我显示列表时的选定项目以及输入旁边的选定项目列表

（写出您的想法。）

实际行为

我已经加载了数据，但是当我更改所选数据的状态时，它会显示为所选项目，而不会显示所选项目，因此我可以再次选择相同的项目

（写出什么情况。添加屏幕截图！）

可复制代码

  componentWillMount() {
    getTherapyType().then(data => {
      this.setState({ therapy_type: data });
    });
  }
  componentDidMount() {
    this._fillUserData();
  }

  _fillUserData = async () => {
    const userData = await storage.load({key: "loggedData"});

    var therapy_type_selected = new Array();

    userData.therapyType.map(function(index, elem) {
      therapy_type_selected.push({id: index.id, name: index.name}); 
    })

    this.setState({ 
      therapy_type_selected:therapy_type_selected
    });
  };


  _renderMultiselect = (item, item_selected, item_selected_name, label) => {
    item.map(function(index, elem) {
      item[elem].id = index.id.toString();
    })
    return (
      <View>
        <FormLabel labelStyle={ styles.label }>{label}</FormLabel>
        <View style={{marginLeft: 20, marginRight: 20}}>
          <MultiSelect
            items={item}
            uniqueKey="id"
            displayKey="name"
            onSelectedItemsChange={selectedItems => this.setState({[item_selected_name]: selectedItems })}
            selectedItems={item_selected}
            selectText="Seleccionar"
            searchInputPlaceholderText="Buscar..."
            tagRemoveIconColor={Colors.mainBackground}
            tagBorderColor={Colors.mainBackground}
            tagTextColor={Colors.tintColor}
            selectedItemTextColor={Colors.tintColor}
            selectedItemIconColor={Colors.tintColor}
            textColor={Colors.tintColor}
            itemTextColor={Colors.extraTintColor}
            searchInputStyle={{ color: Colors.tintColor }}
            submitButtonColor={Colors.tintColor}
            submitButtonText="Seleccionar"
          />
        </View>
      </View>
    );
  };


  render() {
    const {
      therapy_type_selected,
      therapy_type,
    } = this.state;

    return (
      <ScrollView>
          <View>
            <Card titleStyle={ styles.cardTitle } dividerStyle={ styles.cardDivider } containerStyle={ styles.card } title="Datos de Registro">

            {this._renderMultiselect(therapy_type, therapy_type_selected, 'therapy_type_selected', 'Tipo de Terapia')}

            <Button
              raised
              icon={{name: 'login', type: 'entypo'}}
              title='Save' 
              onPress={this.save}
              buttonStyle= { styles.buttonRegister }
            />
            </Card>
          </View>
      </ScrollView>
    );
  }

Answer 1

解决方案很简单。在选定的数据内，只需在字符串中添加ID，就像这样

userData.therapyType.map(function(index, elem) {
  therapy_type_selected.push(index.id.toString()); 
})

react-native-multiple-select如何使用存储的数据填充

库版本

预期行为

实际行为

可复制代码

1 个答案: