#reactjs #react-native #react-native-android #react-native-ios
#reactjs #react-native #react-native-android #react-native-ios
Вопрос:
Я использую React-native-dropdown-picker для отображения списка дат, однако при выборе любого элемента значение не выбирается
полный код:
import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {getMonthDate} from '../../../utils/dateUtils';
import Icon from 'react-native-vector-icons/FontAwesome';
import DropDownPicker from 'react-native-dropdown-picker';
import {getFullDate} from '../../../utils/dateUtils';
import DaysInAWeek from './DaysInAWeek';
export default function Header(props) {
const [daysInAWeek, setDaysInAWeek] = useState([]);
const data = props.data;
// const end_ts = props.end_ts;
// const start_ts = props.start_ts;
const end_ts = 1605916800000;
const start_ts = 1603238400000;
let interval = 7 * 86400000;
let arr = [];
let new_arr = [];
for (let i = start_ts; i < end_ts; i = i interval) {
arr.push(i);
}
for (var i = 0; i < arr.length; i = 2) {
new_arr.push(arr.slice(i, i 2));
}
let dateArr = [];
for (let a of new_arr) {
console.log('a', a);
let label;
if (a.length > 1) {
label = getMonthDate(new Date(a[0])) '-' getMonthDate(new Date(a[1]));
} else {
label = `${getMonthDate(new Date(a[0]))}`;
}
let obj = {
label,
value: a,
};
dateArr.push(obj);
}
function onValSelect(val) {
if (val.length > 1) {
let arr = [];
for (let i = val[0]; i <= val[1]; i = 86400000) {
let date = getMonthDate(new Date(i));
arr.push(date);
}
console.log('final arr', arr);
setDaysInAWeek(arr);
} else {
console.log('single date', new Date(val));
setDaysInAWeek(new Date(val));
}
}
console.log('date Arr', dateArr);
return (
<View>
<View style={styles.container}>
{console.log('new array', dateArr)}
{console.log('arr', arr)}
<Icon
name="arrow-left"
size={20}
color="#fff"
style={{marginTop: 12}}
/>
{console.log('----------date', dateArr)}
{dateArr != null amp;amp; (
<DropDownPicker
onChangeItem={value=>{
onValSelect(value)
}}
items={dateArr}
itemStyle={{
// justifyContent: 'flex-start',
flexDirection:'row'
}}
containerStyle={{height: 40,width:'80%',zIndex:2}}
/>
)}
{console.log('----------days', daysInAWeek)}
</View>
<DaysInAWeek daysInAWeek={daysInAWeek} />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#FE017E',
// height: 56,
zIndex:2,
width: '100%',
flexDirection: 'row',
padding: 10,
},
});
Где я ошибаюсь?
Комментарии:
1. «когда я выбираю какой-либо элемент, значение не выбирается» — кажется немного оксюморонным, можете ли вы объяснить, что выбрано или не выбрано? Какие шаги по отладке вы предприняли? Есть ли какие-либо журналы ошибок?
onValSelect
Вызывается? Если да, имеет ли оно ожидаемоеval
значение? Для чего весь цикл массива в теле функции? Похоже, в основном создаются параметры для средства выбора? Кроме того, я вижу, что объект date сохраняется в состоянии, а не сохраняет его в виде массива (setDaysInAWeek(new Date(val));
).2. onValSelect не вызывается, в этом проблема, и я попытался удалить все остальные элементы в представлении, утешил состояние, но метод вообще не вызывается, очень странно, но я не уверен в причине
3. Думаете, вы могли бы создать бегущую закуску Expo , которая воспроизводит эту проблему?