React useCallback在useState问题之前被调用

时间:2020-08-10 12:06:38

标签: reactjs react-native react-hooks

当他们按下“提交”时,我试图提醒用户他们根据 java.lang.NoSuchFieldException: No field mMaxWidth in class Landroid/widget/ImageView; (declaration of 'android.widget.ImageView' appears in /system/framework/framework.jar!classes3.dex) at java.lang.Class.getDeclaredField(Native Method) at com.nostra13.universalimageloader.core.imageaware.ImageViewAware.getImageViewFieldValue(ImageViewAware.java:132) at com.nostra13.universalimageloader.core.imageaware.ImageViewAware.getWidth(ImageViewAware.java:79) at com.nostra13.universalimageloader.utils.ImageSizeUtils.defineTargetSizeForView(ImageSizeUtils.java:54) at com.nostra13.universalimageloader.core.ImageLoader.displayImage(ImageLoader.java:260) at com.nostra13.universalimageloader.core.ImageLoader.displayImage(ImageLoader.java:209) at com.nostra13.universalimageloader.core.ImageLoader.displayImage(ImageLoader.java:348) at com.mevevideoeditor.videoeditor.listvideoandmyvideo.MyVideoAdapter.getView(MyVideoAdapter.java:76) at android.widget.AbsListView.obtainView(AbsListView.java:3271) at android.widget.ListView.makeAndAddView(ListView.java:2238) at android.widget.ListView.fillDown(ListView.java:838) at android.widget.ListView.fillFromTop(ListView.java:900) at android.widget.ListView.layoutChildren(ListView.java:1974) at android.widget.AbsListView.onLayout(AbsListView.java:3041) at android.view.View.layout(View.java:23754) 选择了什么选项。

但是我遇到一个问题,当我选中 <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.WAKE_LOCK" /> <uses-permission android:name="android.permission.WRITE_SETTINGS" tools:ignore="ProtectedPermissions" /> <application android:name="com.videoeditor.video.MyApplication" android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:requestLegacyExternalStorage="true" android:largeHeap="true" android:supportsRtl="true" android:theme="@style/AppTheme"> CheckBox的复选框时,handleSubmit函数外部的实际状态为true,但是在today函数中,两个{{1 }}和tomorrow是错误的,我不知道如何获取要在handleSubmit钩子中呈现的实际状态。因此,useCallBack中的todaytomorrow始终为假

请有人可以看到我要去哪里哪里,并协助我解决这个问题。谢谢!!!

useCallBack

2 个答案:

答案 0 :(得分:1)

为什么不更改它

    useEffect(() => {
        props.navigation.setParams({ handleSubmit: handleSubmit })
    }, [handleSubmit])

    console.log(`today is ${today}`) // this works and is changed by the check box
    const handleSubmit = useCallback(() => {
        if (today == true){
            console.log(`today is ${today}`) // today from outise this function is never true
            
            Alert.alert('You selected today')
        }else if (tommorow == true){
            Alert.alert('You selected tommorow')
        }
    }, [today, tommorow])

对此

    useEffect(() => {
        const handleSubmit = () => {
            if (today == true){
                Alert.alert('You selected today')
            }else if (tommorow == true){
                Alert.alert('You selected tommorow')
            }
        }
        props.navigation.setParams({ handleSubmit: handleSubmit })
    },[today, tommorow])

答案 1 :(得分:0)

我对此感到好奇: 我在其他地方读过的建议之一是将函数声明移到组件范围之外,因为这使它们保持不变,而无需使用useCallback。 我想这会表现出相同的行为...我想setParams / submit处理程序将对状态进行陈旧的关闭?

    import React, { useEffect, useState, useCallback } from 'react'
    import { CheckBox } from 'react-native-elements'
    import { Alert } from 'react-native'
    
    function handleSubmit(today,tomorrow) {
    return () => {
            if (today == true){
                console.log(`today is ${today}`)             
                Alert.alert('You selected today')
            }else if (tommorow == true){
                Alert.alert('You selected tommorow')
            }
    
    };
        }
    
    const Choose = (props) => {
        const [today, setToday] = useState(false)
        const [tommorow, setTommorow] = useState(false)
    
        props.navigation.setParams({ handleSubmit: handleSubmit(today,tomorrow) });

const handleTodayclicked() => {
setToday(!today);
props.navigation.setParams({ handleSubmit: handleSubmit(today,tomorrow) });
};

const handleTomorrowClicked() => {
setTommorow(!tommorow);
props.navigation.setParams({ handleSubmit: handleSubmit(today,tomorrow) });
}; 
   
        return (
            <View>
                <CheckBox
                    checked={world}
                    onPress={() => handleTodayclicked()}
                    title='Today'
                />
                <CheckBox
                    onPress={() => handleTomorrowClicked()}
                    title='Tommorow'
                />
            </View>
        )
    }
    export default ChooseToAdd
    
    Choose.navigationOptions = () => {
        const submit = navigationData.navigation.getParam('handleSubmit')
        return {
            headerRight: () =>
                <TouchableOpacity onPress={submit}>
                    <Text>Submit</Text>
                </TouchableOpacity>
        }
    }