反应导航焦点事件监听器返回旧状态答案

【问题标题】：React navigation focus event listener return old state反应导航焦点事件监听器返回旧状态
【发布时间】：2021-01-23 12:49:09
【问题描述】：

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

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

  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", 反应原生：“0.63.4”，

【问题讨论】：

标签： reactjs react-native react-hooks react-navigation react-navigation-v5

【解决方案1】：

事件侦听器只会在初始渲染时知道组件的状态，并且无法访问更新的状态值。我建议您使用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]);

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

添加事件监听器
移除事件监听器
重新添加事件监听器每次调用 setState 时都应始终应用这些步骤。

例如：

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

所以每次你想设置状态时，你都应该重新添加事件监听器。希望这能解决问题。

【讨论】：