反应本机下拉选择器没有响应

Question

我使用 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 知道哪里出了问题或者为什么我的下拉菜单没有响应，那将是一个很大的帮助。任何线索将不胜感激。

Answer 1

我发现了问题。它的运行在无限循环中，因为 userObject 在依赖数组中。请将其从 useEffect 依赖数组中移除，保持为空。

另外，如果 getHomeTabMainAPI() 和 getData() 相互独立。你不需要 if else 块。让我知道这是否有效。

useEffect(() => {
    getData();
    getHomeTabMainAPI();
  }, []);

Answer 2

您在 return

中缺少一个括号

          return ({
            label: item.name,
            value: item.id,
          });

尝试粘贴此代码

反应本机下拉选择器没有响应

React native dropdown picker not responding

reactjs

react-native

react-native-android

react-native-ios