reactjs - 反应本机下拉选择器没有响应
问题描述
我使用 React 本机下拉选择器来显示项目列表,但选择器似乎对任何点击都没有响应
以下是我编写的完整代码:
import React, {useEffect, useState} from 'react';
import {
View,
ScrollView,
ActivityIndicator,
Text,
TouchableOpacity,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import DropDownPicker from 'react-native-dropdown-picker';
import HomeTabAssessmentCardComponent from './components/HomeTabAssessmentCardComponent';
import {API} from '../../api';
import HomeTabOverAllDevelopmentCardComponent from './components/HomeTabOverAllDevelopmentCardComponent';
import HomeTabPhysicalGrowthCardComponent from './components/HomeTabPhysicalGrowthCardComponent';
import HomeTabExpertCardComponent from './components/HomeTabExpertCardComponent';
import HomeTabPremiumCardComponent from './components/HomeTabPremiumCardComponent';
import HomeTabPrimeCardComponent from './components/HomeTabPrimeCardComponent';
import HomeTabWeekWiseImagesCardComponent from './components/HomeTabWeekWiseImagesCardComponent';
export default function HomeTabScreen(props) {
console.log(
' ~ file: HomeTabScreen.js ~ line 12 ~ HomeTabScreen ~ props',
props,
);
const {navigation} = props;
const mHomeTabResponse = null;
const [mainResponse, setMainResponse] = useState([]);
const [mAssessmentList, setAssessmentList] = useState([]);
const [mWeekWiseMediaList, setWeekWiseMedialist] = useState([]);
const [title, setTitle] = useState('');
const [text, setText] = useState('');
const [loading, setLoading] = useState(true);
const [userObject, setUserObject] = useState(null);
const [childId, setChild] = useState(null);
useEffect(() => {
if (userObject) {
getHomeTabMainAPI();
} else {
getData();
}
}, [userObject]);
const getData = () => {
try {
const jsonValue = AsyncStorage.getItem('user_object').then(
(result) =>
// console.log('result', JSON.parse(result)),
setUserObject(JSON.parse(result).children),
// console.log('userssss', userObject),
);
} catch (e) {
console.log(e);
}
};
const getHomeTabMainAPI = async () => {
try {
const response = await API.get(
`some url`,
);
console.log('res', response);
setAssessmentList(response.data.content.assessments.data);
setWeekWiseMedialist(response.data.content.media_cards.data);
setTitle(response.data.content.assessments.title);
setText(response.data.content.assessments.text);
setMainResponse(response.data.content.assessments.data);
setLoading(false);
} catch (e) {
setLoading(false);
}
};
const logoutHandler = () => {
try {
AsyncStorage.removeItem('user_object').then(navigation.navigate('login'));
} catch (e) {
console.log(e);
}
console.log('Done.');
};
if (loading) {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<ActivityIndicator size="large" color="#FE017E" />
</View>
);
}
return (
<ScrollView showsVerticalScrollIndicator={false}>
{console.log('object', userObject)}
{userObject &&
userObject != '' &&
userObject != null &&
userObject != undefined &&
userObject.length > 1 && (
<DropDownPicker
items={userObject.map((item) => {
return {
label: item.name,
value: item.id,
};
})}
containerStyle={{height: 40}}
/>
)}
<TouchableOpacity
style={{
marginLeft: '80%',
}}
onPress={() => logoutHandler()}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: '#000'}}>
Log out
</Text>
</TouchableOpacity>
<View style={{paddingBottom: 58}}>
{/* {console.log('view mWeekWiseMediaList - ' + mWeekWiseMediaList)} */}
{mWeekWiseMediaList !== null && mWeekWiseMediaList.length > 0 ? (
<HomeTabWeekWiseImagesCardComponent data={mWeekWiseMediaList} />
) : (
<Text></Text>
)}
<HomeTabOverAllDevelopmentCardComponent />
<HomeTabPremiumCardComponent />
{/* {mAssessmentList &&
mAssessmentList != '' &&
mAssessmentList != null &&
mAssessmentList.length > 1 &&
userObject != null &&
userObject != '' &&
userObject != undefined &&
userObject[0] &&
userObject[0] != null &&
userObject[0] != undefined &&
userObject[0] != '' && (
<HomeTabAssessmentCardComponent
data={mAssessmentList}
title={title}
text={text}
navigation={props}
children={userObject.children[0].id}
childrenObject={userObject.children[0]}
/>
)} */}
<HomeTabPrimeCardComponent />
<HomeTabPhysicalGrowthCardComponent />
<HomeTabExpertCardComponent />
</View>
</ScrollView>
);
}
如果有人可以让 mw 知道哪里出了问题,或者为什么我的下拉菜单没有响应,那将是一个很大的帮助。任何线索将不胜感激。
解决方案
您缺少一个括号作为回报
return ({
label: item.name,
value: item.id,
});
尝试粘贴此代码
推荐阅读
- java - 在 ConstraintLayout 中添加 FrameLayout
- python - 将 DataFrame 存储在两个 for 循环内的字典中
- php - 多个 laravel 项目可以在一台服务器上使用相同的供应商吗?
- c# - 具有 ExtendedExecutionForegroundSession 的 UWP 应用程序在最小化时会爆炸内存使用
- python-3.x - 如何在列值的最小点之后选择部分数据
- python - 如何以pythonic方式移动文件?
- angular - 角度动态formArray找不到控件
- python - 如何在 Python 的每次迭代中使用 for 循环内的 TopLevel Tkinter 显示和更新包含结果的消息或标签?
- powershell - 查询扩展属性 1 失败空变量
- sql - 如何删除这种类型的表名 [someprefix].table