Reactjs 使用挂钩和标题功能进行反应导航-状态未更新

尝试使用带有挂钩和导航标题中的按钮的react导航

我可以将handleshowmodalgoin函数传递到导航标题，并且可以看到按钮被单击，但问题是setShowLoginModal没有将showLoginModal状态更新为true。不知道为什么这不起作用

import React, { useState, useEffect, useLayoutEffect } from "react";
import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Button,
} from 'react-native';

import LoginModal from './users/LoginModal';

const HomeScreen = ({navigation}, props) => {

  const [showLoginModal, setShowLoginModal] = useState(false);

  const handleShowModalLogin = (value) => {
    console.log("showLoginModal button clicked: ", value)
    if(value === "on"){
      setShowLoginModal(true);
    }else{
      setShowLoginModal(false);
    }
  }

  useEffect(() => {
    console.log('navigation handler set with showLoginModal set:', showLoginModal)
    navigation.setParams({ handleShowModalLogin: handleShowModalLogin });
  }, []);

  useEffect(() => {
    console.log("showLoginModal value changed: ", showLoginModal), [showLoginModal]
  })

  return (
    <View style={styles.container}>

      <LoginModal showLoginModal={showLoginModal} />

      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}>

      </ScrollView>

    </View>
  );

};

HomeScreen.navigationOptions = ({ navigation }) => ({
  title: "Home",
  headerRight: (
    <View style={styles.headerComContainer}>
      <Button
        onPress={() => {
          navigation.getParam('handleShowModalLogin')('on')
        }}
        title="Login"
        color="#841584"
        accessibilityLabel="Login" />
    </View>
  )
});

import React，{useState，useffect，useLayoutEffect}来自“React”；
进口{
形象,，
平台，
滚动视图，
样式表，
文本，
可触摸不透明度，
看法
按钮
}从“反应本机”；
从“/users/LoginModal”导入LoginModal；
常量主屏幕=（{navigation}，道具）=>{
const[showLoginModal，setShowLoginModal]=useState（false）；
const handleshowmodalloin=（值）=>{
log（“单击ShowLoginModel按钮：”，值）
如果（值=“开”）{
setShowLoginModal（真）；
}否则{
setShowLoginModal（假）；
}
}
useffect（（）=>{
console.log（'导航处理程序集与ShowLoginModel集：'，ShowLoginModel）
setParams（{handleshowmodalloin:handleshowmodalloin}）；
}, []);
useffect（（）=>{
log（“showLoginModel值已更改：”，showLoginModel），[showLoginModel]
})
返回(
);
};
HomeScreen.navigationOptions=（{navigation}）=>({
标题：“家”，
头灯：(
{
navigation.getParam（'handleshowmodalgin'）（'on'）
}}
title=“登录”
color=“#841584”
accessibilityLabel=“登录”/>
)
});

这是登录模式组件

import React, { useState } from "react";
import { Text, TouchableOpacity, View, ScrollView } from "react-native";
import Modal from 'modal-enhanced-react-native-web';

export default function LoginModal(props){

  const [visibleModal, setModalVisible] = useState(props.showLoginModal);

  return (
    <View>

      <Modal
        isVisible={visibleModal}
        onBackdropPress={() => setModalVisible(false)}
      >
        <View>
          <Text>Hello!</Text>
          <TouchableOpacity onPress={() => setModalVisible(false)}>
            <View>
              <Text>Close</Text>
            </View>
          </TouchableOpacity>
        </View>
      </Modal>

    </View>
  );

}

import React，{useState}来自“React”；
从“react native”导入{Text，TouchableOpacity，View，ScrollView}；
从“Modal增强的本地web”导入Modal；
导出默认函数LoginModal（props）{
const[visibleModel，setModalVisible]=useState（props.showLoginModel）；
返回(
setModalVisible（假）}
>
你好
setModalVisible（假）}>
接近
);
}

LoginModal中的这段代码创建了一个状态，其初始值为props.showLoginModal。但在初始值之后，与道具没有任何联系。稍后更改道具不会导致状态更改

您似乎试图将LoginModel混合为受控组件（父级处理逻辑，然后通过道具控制逻辑）和非受控组件（组件管理自己的状态）。相反，我建议选择其中一个

从您试图从外部控制它的事实来看，您似乎想要创建一个受控组件。因此，您的登录模式将需要修改，以有额外的道具通知家长的点击。可能是“onBackdropPressed”和“onClosePressed”，如：

导出默认函数LoginModal（props）{
返回(
props.onBackdropPressed（）}
>
你好
props.onClosePressed（）>
接近
);
}

别忘了修改主屏幕以传入这些附加道具，如：

<LoginModal 
  showLoginModal={showLoginModal} 
  onBackdropPressed={() => setShowLoginModal(false)}
  onClosePressed={() => setShowLoginModal(false)}
/>

setshowlogimodal（false）}
onClosePressed={（）=>SetShowlogInModel（false）}
/>

当您说它没有更新时，您的意思是HandleShowModAllIn第三行的console.log语句显示了旧值吗？或者您的意思是组件不重新渲染？是的，它显示旧值，而组件不渲染。处理程序中的第二个

console.log

，并没有达到您期望的效果。处理程序函数关闭

showmodalgin

，然后使用

useffect

确保导航参数只设置一次，因此每当执行

navigation.getParam（'handleshowmodalgin'）（）

时，它将始终记录初始值（false），而不是当前值。但这并不能解释为什么它不会重新渲染。好吧，当状态或道具更新时，react会重新渲染（大多数情况下）。删除一个

useffect（（）=>console.log（showLoginModal），[showLoginModal]）

在您的

主屏幕

组件中，它将随时记录

showLoginModal

更新值，或者完全忽略数组，并记录每次渲染。如果重新呈现没有在您预期的位置/时间进行，则返回跟踪调用堆栈，直到看到它按预期更新，并查看这些更改没有传播到组件的原因。@drewerese我尝试过（代码段更新），控制台看起来很好，但组件没有重新呈现。1） 带有ShowLoginModel集的导航处理程序集：false 2）更改了ShowLoginModel值：false 3）单击了ShowLoginModel按钮：打开4）更改了ShowLoginModel值：true

export default function LoginModal(props){
  return (
    <View>
      <Modal
        isVisible={props.showLoginModal}
        onBackdropPress={() => props.onBackdropPressed()}
      >
        <View>
          <Text>Hello!</Text>
          <TouchableOpacity onPress={() => props.onClosePressed()>
            <View>
              <Text>Close</Text>
            </View>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
}

<LoginModal 
  showLoginModal={showLoginModal} 
  onBackdropPressed={() => setShowLoginModal(false)}
  onClosePressed={() => setShowLoginModal(false)}
/>