useFocusEffect不会更新setstate

时间:2020-08-05 02:27:40

标签: react-native react-navigation

我正在尝试将useFocusEffect用作setState。 但我无法更新状态...

我该如何解决?

const [isFocuse, setIsFocuse] = useState(true);

  useFocusEffect(
      React.useCallback(() => {
        setIsFocuse('sample1');
        console.log('mount', isFocuse); // mount true
        return () => {
          setIsFocuse('sample2');
          console.log('unmount', isFocuse); // unmount true
        };
      }, []),
  );

1 个答案:

答案 0 :(得分:1)

我知道这是一个老问题,但对于任何寻求解决方案的人来说。 根据{{​​3}}上的React导航文档。 您需要添加状态,并将其更改为对useCallback挂钩的依赖。 因此正确的代码将是。 `

   const [isFocuse, setIsFocuse] = useState(true);
       useFocusEffect(
           React.useCallback(() => {
               setIsFocuse('sample1');
               console.log('mount', isFocuse); 
               return () => {
                   setIsFocuse('sample2');
                   console.log('unmount', isFocuse); 
               };
  }, [isFocuse]));`

那将起作用。

PSsetState或其等效的钩子是异步任务,因此在这种情况下,console.log()可能在状态更新之前运行,这将导致log值不正确。您可以像使用isFocuse一样使用useEffect钩子作为依赖项来记录状态更改