React native 减速机代码第一次运行，但连续运行时只执行操作代码，而减速机代码不执行？|反应本机和还原

我通常试图自己解决问题，所以我通过检查StackOverflow和Google从中学到了更多，但这一次让我陷入了太久的困境

上下文 所以，我正在创建一个React原生应用程序（无Expo），并使用redux、redux thunk和React redux

有一个功能，登录用户应该能够输入或编辑他/她的未来日期的可用性。 所以，我有虚拟数据来设置初始值

我可以成功编辑任何日期（使用availability day.component.tsx）并在用户配置文件屏幕（Profile.component.tsx）上显示更新的可用性

问题 但是，当我尝试在第一次编辑之后编辑任何其他日期时，它将运行我的代码直到相应的redux操作代码结束，但不会执行相应的redux reducer代码（虽然它在第一次编辑时确实运行了该代码）

#TLDR 我可以编辑和更新一次现有的可用性，但reducer代码不会在连续编辑的情况下执行

你知道是什么原因造成的吗？如何解决

#档案

由于字符限制，我无法添加下面问题或评论中的所有文件，因此将它们存储在Google Drive上

// reducer action snippet
export const updateAvailability = (
  userId,
  userAccountType,
  userFirstName,
  userLastName,
  userEmail,
  userPhoneNumber,
  userAvatar,
  userAddress,
  userLocation,
  userBio,
  userFollowers,
  userFollowing,
  userPosts,
  updatedUserAvailability,
  userGender,
  userAge,
) => {
  return async (dispatch) => {
    const date = new Date();
    console.log('ARRIVED AT START OF USERS ACTIONS');
    console.log(updatedUserAvailability);
    try {
      dispatch({
        type: UPDATE_AVAILABILITY,
        profileData: {
          userId: userId,
          userAccountType: userAccountType,
          userFirstName: userFirstName,
          userLastName: userLastName,
          userEmail: userEmail,
          userPhoneNumber: userPhoneNumber,
          userAvatar: userAvatar,
          userAddress: userAddress,
          userLocation: userLocation,
          userBio: userBio,
          userFollowers: userFollowers,
          userFollowing: userFollowing,
          userPosts: userPosts,
          userAvailability: updatedUserAvailability,
          userGender: userGender,
          userAge: userAge,
        },
      });
    } catch (err) {
      // send to custom analytics server
      throw err;
    }
  };
};

//编辑向redux发送更新值的组件
从“React”导入React；
从“react native”导入{View}；
进口{
阿凡达
按钮
样式服务，
文本，
TopNavigation，
TopNavigationAction，
使用样式表，
使用主题，
情态动词
卡片
日期选择器，
纺纱机，
}来自“@ui kitten/components”；
从“../../store/actions/users”导入*作为usersActions；
从“../../data/Profile.model”导入{Availability，Profile}；
从“../../assets/images/branding”导入{brandingAppIcon}；
从“../../components/UI/time picker.component”导入{Timepicker}；
从“../../navigation/profile.navigator”导入{AvailabilityDayEditScreenProps}；
从'react redux'导入{useSelector，connect，useDispatch}；
从“../../navigation/app routes”导入{AppRoute}；
导出类型可用性DayEditRouteParams={
可编辑可用性：编号；
};
导出常量可用性DayEditScreen=(
道具：可用性DayEditScreenProps，
)：SafeAreaLayoutElement=>{
const{editableAvailability}=props.route.params；
console.log（可编辑可用性）；
const currentUser:Profile=useSelector(
（state）=>state.users.activeProfile，
);
console.log（当前用户）；
const[isLoading，setIsLoading]=React.useState（false）；
const[error，setError]=React.useState（）；
const[activeUser，setActiveUser]=React.useState（当前用户）；
const[userAvailability，setUserAvailability]=React.useState<
可用性[]
>（activeUser.userAvailability）；
const[userAvailabilityEditing，setUserAvailabilityEditing]=React.useState<
对象
>（activeUser.userAvailability[editableAvailability]）；
常量[editDate，setEditDate]=React.useState(
userAvailabilityEditing.date，
);
const[editDateFrom，setEditDateFrom]=React.useState(
userAvailabilityEditing.from，
);
常量[editDateTo，setEditDateTo]=React.useState(
userAvailabilityEditing.to，
);
React.useffect（（）=>{
setActiveUser（当前用户）；
setUserAvailability（currentUser.userAvailability）；
}，[currentUser]）；
const dispatch=usedpatch（）；
const submitHandler=React.useCallback（异步（）=>{
//如果（！formState.formIsValid）{
//Alert.Alert（'输入错误！'，'请检查表单中的错误'[
//{文本：'确定'}，
//   ]);
//返回；
// }
设置错误（空）；
设置加载（真）；
试一试{
console.log（用户可用性编辑）；
//log（'EDITDATE='+EDITDATE）；
//log（'EDITFROM='+editDateFrom）；
//log（'EDITTO='+editDateTo）；
const newUserAvailabilityEditing={
…用户可用性编辑，
发件人：editDateFrom，
致：editDateTo，
};
console.log（newUserAvailabilityEditing）；//正确
//setEditDate（未定义）；//重置editDate
const updatedUserAvailability=userAvailability.map（（availItem）=>{
if（userAvailability.indexOf（availItem）==editableAvailability）{
返回newUserAvailabilityEditing；
}
返回有效性；
});
console.log（“下面更新的用户可用性”）；
console.log（updateUserAvailability）；//正确
//log（activeUser）；
if（activeUser）{
待命(
usersActions.updateAvailability(
activeUser.userId，
activeUser.userAccountType，
activeUser.userFirstName，
activeUser.userLastName，
activeUser.userEmail，
activeUser.userPhoneNumber，
activeUser.userAvatar，
activeUser.userAddress，
activeUser.userLocation，
activeUser.userBio，
activeUser.userFollowers，
activeUser.userFollowing，
activeUser.userPosts，
更新的可用性，
activeUser.userGender，
activeUser.userAge，
),
);
}
}捕捉（错误）{
设置错误（错误消息）；
}
设置加载（假）；
log（“将用户发送回配置文件屏幕”）；
道具.导航.导航（AppRoute.PROFILE）；
}, [
道具，导航，
用户可用性编辑，
编辑日期：，
编辑日期：，
用户可用性，
activeUser，
可编辑可用性，
派遣，
]);
如果（孤岛加载）{
返回(
);
}
返回(
(
)}>
请编辑此日期的可用性。
{
setEditDateFrom（下一个时间）；
}}
/>
{
setEditDateTo（下一个时间）；
}}
/>
{错误}
更新可用性
);
};
constyles=StyleService.c
// redux reducer snippet
import {
  GET_PROFILES,
  CREATE_PROFILE,
  UPDATE_PROFILE,
  UPDATE_AVAILABILITY,
} from '../actions/users';

const initialState = {
  availableProfiles: PROFILES,
  activeProfile: PROFILES.find((profile) => profile.userId === 'u2'),
  error: null,
};

const usersReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_AVAILABILITY:
      console.log('ARRIVED AT START REDUCER');
      // Find and update the activeUser Profile.
      const updatingProfileIndex = state.availableProfiles.findIndex(
        (profile) => profile.userId === action.profileData.userId,
      );
      console.log(updatingProfileIndex);
      console.log(action.profileData.userAvailability);

      const updatedAvailabilityProfile = new Profile(
        action.profileData.userId,
        action.profileData.userAccountType,
        action.profileData.userFirstName,
        action.profileData.userLastName,
        action.profileData.userEmail,
        action.profileData.userPhoneNumber,
        action.profileData.userAvatar,
        action.profileData.userAddress,
        action.profileData.userLocation,
        action.profileData.userBio,
        action.profileData.userFollowers,
        action.profileData.userFollowing,
        action.profileData.userPosts,
        action.profileData.userAvailability,
        action.profileData.userGender,
        action.profileData.userAge,
      );

      console.log(updatedAvailabilityProfile);
      console.log(
        'UPDATED AVAILABILITIY PROFILE=' +
          JSON.stringify(updatedAvailabilityProfile),
      );
      // const updatedActiveProfile = [...state.activeProfile];
      // console.log(updatedActiveProfile);
      // updatedActiveProfile[profileIndex] = updatedProfile;
      // console.log(updatedActiveProfile);

      // Update the activeUser Profile in the availableProfiles array.
      const updatingAvailableProfiles = {...state.availableProfiles};
      updatingAvailableProfiles[
        updatingProfileIndex
      ] = updatedAvailabilityProfile;

      // Return the updated profile states
      return {
        ...state,
        availableProfiles: updatingAvailableProfiles,
        activeProfile: updatedAvailabilityProfile,
      };

    default:
      return state;
  }
};

export default usersReducer;

// editing component that sends updated values to redux
import React from 'react';
import {View} from 'react-native';
import {
  Avatar,
  Button,
  StyleService,
  Text,
  TopNavigation,
  TopNavigationAction,
  useStyleSheet,
  useTheme,
  Modal,
  Card,
  Datepicker,
  Spinner,
} from '@ui-kitten/components';
import * as usersActions from '../../store/actions/users';
import {Availability, Profile} from '../../data/profile.model';
import {brandingAppIcon} from '../../assets/images/branding';
import {Timepicker} from '../../components/UI/time-picker.component';
import {AvailabilityDayEditScreenProps} from '../../navigation/profile.navigator';
import {useSelector, connect, useDispatch} from 'react-redux';
import {AppRoute} from '../../navigation/app-routes';

export type AvailabilityDayEditRouteParams = {
  editableAvailability: number;
};

export const AvailabilityDayEditScreen = (
  props: AvailabilityDayEditScreenProps,
): SafeAreaLayoutElement => {
  const {editableAvailability} = props.route.params;
  console.log(editableAvailability);
  const currentUser: Profile = useSelector(
    (state) => state.users.activeProfile,
  );
  console.log(currentUser);

  const [isLoading, setIsLoading] = React.useState(false);
  const [error, setError] = React.useState();

  const [activeUser, setActiveUser] = React.useState<Profile>(currentUser);
  const [userAvailability, setUserAvailability] = React.useState<
    Availability[]
  >(activeUser.userAvailability);

  const [userAvailabilityEditing, setUserAvailabilityEditing] = React.useState<
    Object
  >(activeUser.userAvailability[editableAvailability]);
  const [editDate, setEditDate] = React.useState<Date>(
    userAvailabilityEditing.date,
  );
  const [editDateFrom, setEditDateFrom] = React.useState<Date>(
    userAvailabilityEditing.from,
  );
  const [editDateTo, setEditDateTo] = React.useState<Date>(
    userAvailabilityEditing.to,
  );

  React.useEffect(() => {
    setActiveUser(currentUser);
    setUserAvailability(currentUser.userAvailability);
  }, [currentUser]);

  const dispatch = useDispatch();

  const submitHandler = React.useCallback(async () => {
    // if (!formState.formIsValid) {
    //   Alert.alert('Wrong input!', 'Please check the errors in the form.', [
    //     {text: 'OK'},
    //   ]);
    //   return;
    // }
    setError(null);
    setIsLoading(true);
    try {
      console.log(userAvailabilityEditing);
      // console.log('EDITDATE=' + editDate);
      // console.log('EDITFROM=' + editDateFrom);
      // console.log('EDITTO=' + editDateTo);
      const newUserAvailabilityEditing = {
        ...userAvailabilityEditing,
        from: editDateFrom,
        to: editDateTo,
      };
      console.log(newUserAvailabilityEditing); // CORRECT
      // setEditDate(undefined); // reset editDate
      const updatedUserAvailability = userAvailability.map((availItem) => {
        if (userAvailability.indexOf(availItem) === editableAvailability) {
          return newUserAvailabilityEditing;
        }
        return availItem;
      });
      console.log('UPDATED USER AVAILABILITY BELOW');
      console.log(updatedUserAvailability); // CORRECT
      // console.log(activeUser);

      if (activeUser) {
        await dispatch(
          usersActions.updateAvailability(
            activeUser.userId,
            activeUser.userAccountType,
            activeUser.userFirstName,
            activeUser.userLastName,
            activeUser.userEmail,
            activeUser.userPhoneNumber,
            activeUser.userAvatar,
            activeUser.userAddress,
            activeUser.userLocation,
            activeUser.userBio,
            activeUser.userFollowers,
            activeUser.userFollowing,
            activeUser.userPosts,
            updatedUserAvailability,
            activeUser.userGender,
            activeUser.userAge,
          ),
        );
      }
    } catch (err) {
      setError(err.message);
    }
    setIsLoading(false);
    console.log('Sending User Back to Profile Screen');
    props.navigation.navigate(AppRoute.PROFILE);
  }, [
    props.navigation,
    userAvailabilityEditing,
    editDateFrom,
    editDateTo,
    userAvailability,
    activeUser,
    editableAvailability,
    dispatch,
  ]);

  if (isLoading) {
    return (
      <View style={styles.centeredLoader}>
        <Spinner size="large" />
      </View>
    );
  }

  return (
    <Card
      disabled={true}
      style={styles.container}
      header={() => (
        <View>
          <Avatar style={styles.profileAvatar} source={brandingAppIcon} />
        </View>
      )}>
      <Text>Please edit your availability for this date.</Text>
      <View style={styles.availabilityDayEdit}>
        <Datepicker date={editDate} disabled />
        <Timepicker
          key={'editStartTime'}
          placeholder="Available to start at"
          date={editDateFrom}
          onSelect={(nextTime) => {
            setEditDateFrom(nextTime);
          }}
        />
        <Timepicker
          key={'editEndTime'}
          placeholder="Available until"
          date={editDateTo}
          onSelect={(nextTime) => {
            setEditDateTo(nextTime);
          }}
        />
      </View>
      <Text>{error}</Text>
      <Button onPress={submitHandler}>UPDATE AVAILABILITY</Button>
    </Card>
  );
};

const styles = StyleService.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: 'background-basic-color-2',
  },
  appName: {
    color: 'text-control-color',
  },
  header: {
    flex: 1,
    paddingVertical: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  profileAvatar: {
    width: 124,
    height: 124,
    alignSelf: 'center',
    borderRadius: 62,
    marginVertical: 16,
  },
  profileName: {
    zIndex: 1,
  },
  locationContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  location: {
    marginVertical: 8,
  },
  profileButtonsContainer: {
    flexDirection: 'row',
    marginVertical: 32,
    marginHorizontal: 20,
  },
  profileButton: {
    flex: 1,
    marginHorizontal: 4,
  },
  socialsContainer: {
    flexDirection: 'row',
    width: '75%',
    marginVertical: 8,
  },
  profileSocial: {
    flex: 1,
    alignSelf: 'center',
  },
  sectionLabel: {
    marginTop: 16,
    marginBottom: 8,
    marginHorizontal: 16,
  },
  profileDescription: {
    marginHorizontal: 16,
  },
  friendsList: {
    marginHorizontal: 8,
  },
  friendItem: {
    alignItems: 'center',
    marginHorizontal: 8,
  },
  friendName: {
    marginTop: 8,
  },
  postItem: {
    flex: 1,
    aspectRatio: 1.0,
  },
  availabilityContainer: {
    marginLeft: 16,
    marginRight: -16,
  },
  availabilityItemLabel: {
    flex: 1,
    textDecorationLine: 'underline',
  },
  availabilityItemValue: {
    flex: 1,
  },
  availabilityItem: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginVertical: 8,
  },
  availabilityItemDate: {
    flex: 3,
  },
  availabilityItemTime: {
    flex: 1,
  },
  availabilityItemButton: {
    // flex: 1,
    marginRight: 30,
  },
  addVenueItem: {
    marginHorizontal: 8,
    alignItems: 'center',
    marginLeft: 0,
  },
  addVenueButton: {
    aspectRatio: 1.0,
    height: 42,
    borderRadius: 24,
    color: 'text-control-color',
    paddingRight: 7,
    // resizeMode: 'contain',
    // width: 50,
    // height: 50,
    // borderRadius: 50,
    // backgroundColor:'black'
  },
  addVenueButtonText: {
    paddingTop: 5,
    fontSize: 13,
  },
  modalBackdrop: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  availabilityDayEdit: {
    flexDirection: 'row',
    paddingVertical: 16,
    justifyContent: 'space-between',
  },
});

connect()(AvailabilityDayEditScreen);

const updatingAvailableProfiles = {...state.availableProfiles};

const updatingAvailableProfiles = state.availableProfiles;