Вы предприняли хорошую попытку настроить 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 (
{ 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" />
);
}
Вот это вместе, в перекус: 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 (
{ 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" />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'white',
padding: 8
}
});
Таким образом, у меня была эта проблема с Adobe Reader 9.0. Так или иначе программа забыла открываться на моем правильном мониторе и последовательно открывалась на моем левом мониторе. Большинство программ позволяет Вам перетаскивать его, максимизировать экран и затем закрывать его, и это будет помнить. Ну, с Adobe я должен был перетащить его и затем закрыть его прежде, чем максимизировать его для Windows для запоминания который экран открыть его в следующий раз. После того как Вы устанавливаете его на корректный монитор, затем можно максимизировать его. Я думаю, что это глупо, так как почти все Windows-программы помнят это автоматически без попытки подстроить путь к XP для запоминания.