React 导航焦点事件侦听器 return 旧状态

Question

焦点事件侦听器内部返回旧值

如何在我的事件侦听器中获取当前 state/value，因为它当前正在返回旧值

  const [organizationName, setOrganizationName] = React.useState('');

      React.useEffect(() => {
        const unsubscribeNavigationFocus = props.navigation.addListener(
          'focus',
          async () => {
        try {     
          console.log(organizationName, 'OLD VALUE');
        
    
          // }
        } catch (error) {
          console.log('inside error');
          console.log(error);
    
        } finally {
    
        }
      }
        );
    
        return unsubscribeNavigationFocus;
      }, [props.navigation]);

@react-navigation/native: "5.8.10", react": "16.13.1", react-native: "0.63.4",

Answer 1

确保在每次渲染时重新添加事件监听器 useEffect 内部：

添加事件侦听器
删除事件侦听器
重新添加事件侦听器应始终在每次 setState 调用时应用这些步骤。

例如：

useEffect(() => {focusElement.addEventListener(...);
return () => {
 focusElement.removeEventListener(...)},[dependencies])

所以每次你想要设置状态时，你都应该重新添加事件监听器。希望这一切都清楚。

Answer 2

事件侦听器只会在初始渲染时了解组件的状态，而无法访问更新后的状态值。我建议您使用 useRef 创建对组件状态或组件状态的一些属性的引用：

const [someStateVal, setSomeStateVal] = React.useState("");
  const stateRef = useRef(""); //--> data that you want to use inside the listener

  const updateState = val => {
    stateRef.current = val;
    setSomeStateVal(val);
  };

  React.useEffect(() => {
    const unsubscribeNavigationFocus = props.navigation.addListener(
      "focus",
      async () => {
        try {
          console.log(stateRef.current, "UPDATED VALUE");

        } catch (error) {
          //...
        } finally {
          //...
        }
      }
    );

    return unsubscribeNavigationFocus;
  }, [props.navigation]);

Answer 3

您需要将您的状态添加到依赖数组

const [organizationName, setOrganizationName] = React.useState('');

React.useEffect(() => {
  const unsubscribeNavigationFocus = props.navigation.addListener(
    'focus',
    async () => {
      try {
        console.log(organizationName, 'OLD VALUE');

        // }
      } catch (error) {
        console.log('inside error');
        console.log(error);
      } finally {
      }
    }
  );

  return unsubscribeNavigationFocus;
}, [props.navigation, organizationName]);

使用 React 的官方 ESLint 插件来捕获此类问题https://www.npmjs.com/package/eslint-plugin-react-hooks

React 导航焦点事件侦听器 return 旧状态

React navigation focus event listener return old state

reactjs

react-native

react-navigation

react-hooks

react-navigation-v5