выборка значений с сервера для мультиселектора

Question

выборка значений с сервера для мультиселектора

foreach (DataColumn item in row.Table.Columns)
{
    switch (item.ColumnName)
    {
        case "ID":
            {
                p.ID = Convert.ToInt32(row[item.ColumnName].ToString());
            }
            break;
        case "firstName":
            {
                p.firstName = row[item.ColumnName].ToString();
            }
            break;
        case "lastName":
            {
                p.lastName = row[item.ColumnName].ToString();
            }
            break;

        default:
            break;
    };
}

1

react-native

задан priya arokiadass 6 March 2019 в 09:23

1 ответ

Другие вопросы по тегам:

react-native

Похожие вопросы:

score 0 · Answer 1

Вы предприняли хорошую попытку настроить MultiSelect, однако есть пара вопросов, которые необходимо решить.

Если вы посмотрите на зависимость, данные, которые должны быть переданы ей, должны быть массивом объектов. Пример дает объект как { id: '92iijs7yta', name: 'Ondo' }. Мы можем легко преобразовать ваши данные из массива строк в массив объектов, соответствующих примеру.

let LangPickerValueHolder = langArray.map((name, id) => { return { name, id }; });

Используя карту, мы можем преобразовать массив.

Это сделает ваш componentDidMount похожим на следующее:

componentDidMount () {
  fetch('https://movieworld.sramaswamy.com/GetMFBasicDetails.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  }).then(response => response.json())
    .then(responseJson => {
      let langString = responseJson.MFBasic.Languages;
      let langArray = langString.split(',');
      let LangPickerValueHolder = langArray.map((name, id) => { return { name, id }; }); // <- here we had the mapping function
      this.setState({ LangPickerValueHolder }); // <- save the new array of objects into the state
      console.log(langArray);
    }).catch(error => {
      console.error(error);
    });
}

Настройка компонента MultiSelect требует еще нескольких изменений.

Во-первых, нет MultiSelect.Item, поэтому map, который вы используете для заполнения MultiSelect, не будет работать. Вместо этого вам нужно использовать опору items для установки предметов. Затем вам нужно сообщить компоненту MultiSelect правильную опору uniqueKey (которая в нашем случае будет id) и правильно установить displayKey.

Вот как может выглядеть ваш render.

render () {
  return (
    <View style={styles.container}>
      <MultiSelect
        ref={(component) => { this.multiSelect = component; }}
        onSelectedItemsChange={(value) =>
          this.setState({ LangKnown: value })
        }
        uniqueKey="id"
        items={this.state.LangPickerValueHolder} 
        selectedItems={this.state.LangKnown}
        onChangeInput={ (text) => console.log(text)}
        displayKey = 'name'
        submitButtonText="Submit" />
    </View>
  );
}

Вот это вместе, в перекус: https://snack.expo.io/@andypandy/multiselect-with-data-from-api

Здесь это код из закуски:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import MultiSelect from 'react-native-multiple-select';

export default class App extends React.Component {
  // declaring state like this is absolutely fine, it doesn't need to be in a constructor
  state = {
    LangPickerValueHolder: [],
    LangKnown: []
  }

  componentDidMount () {
    fetch('https://movieworld.sramaswamy.com/GetMFBasicDetails.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then(response => response.json())
      .then(responseJson => {
        let langString = responseJson.MFBasic.Languages;
        let langArray = langString.split(',');
        let LangPickerValueHolder = langArray.map((name, id) => { return { name, id }; });
        this.setState({
          LangPickerValueHolder
        });
        console.log(langArray);
      }).catch(error => {
        console.error(error);
      });
  }

  render () {
    return (
      <View style={styles.container}>
        <MultiSelect
          ref={(component) => { this.multiSelect = component; }}
          onSelectedItemsChange={(value) =>
            this.setState({ LangKnown: value })
          }
          uniqueKey="id" // <- set the value for the uniqueKey
          items={this.state.LangPickerValueHolder} // <- set the items you wish to show
          selectedItems={this.state.LangKnown}
          onChangeInput={ (text) => console.log(text)}
          displayKey = 'name' .   // <- fix typo here
          submitButtonText="Submit" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'white',
    padding: 8
  }
});