reactjs - 没有为 deepLink 调用 useEffect 中的函数

问题描述

下午好，我正在尝试使用 react 路由器通量设置 deepLinking 以进行本机反应，但似乎我的 useEffect 中的函数没有运行。我相信这可能是因为它没有正确获得状态。当我访问 flow_id 的 URL 时，它只会在 UI 中呈现我在 URL 中输入的内容，但该函数不会运行。它应该将 flow_id 与 scene_key 匹配，并使用适当的流和子流打开场景。任何指导将不胜感激。

import React, { useEffect } from 'react';
import { Linking, View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { useSelector, useDispatch } from 'react-redux';
import Router from '../Router';
import reducers from '../reducers';
import * as ActionCreators from '../actions';
import * as Globals from '../library/utils/globals';
import {
  selectFlow,
  flowsFetch,
  subFlowsFetch,
} from '../actions';

const DeepLink = (props) => {
  useEffect(() => {
    const onDeepLink = (url) => {
      const dispatch = useDispatch();
      const allFlows = useSelector(
        (state) => state.flows.all
      );
      console.log(props.flow_id);
      console.log('[DeepLink] onDeepLink: ', url);
      const flow = allFlows.filter((obj) => {
        return obj.key === url.key;
      });
      dispatch(flowsFetch());

      if (
        allFlows.getState().app_bootstrap.completed === true
      ) {
        console.log('[DeepLink] bootstrap completed!');

        Actions.reset('mainTabs');

        if (url.hasOwnProperty('scene_key')) {
          console.log('[DeepLink] scene_key exists');
          console.log(
            '[DeepLink] flow key: ',
            url.flow_key
          );

          // Check if Deepline is a defined flow
          if (
            (props.flow_id === url.scene_key) ===
              'flowDescription' &&
            url.flow_key !== undefined
          ) {
            console.log('[DeepLink] scene_key is a flow!');
            console.log(
              '[DeepLink] # of flows with matching key in store: ',
              flow.length
            );

            // If no flows of matching key found, wait for database fetch
            if (flow.length == 0) {
              console.log(
                '[DeepLink] flow not found locally; starting timer...'
              );
              dispatch(flowsFetch());
              Actions.reset('notificationLoader', {
                parameters: url,
              });

              // Timer to wait for update to flows
              setTimeout(() => {
                // Check for flows in updated store
                const updatedAllFlows = allFlows.getState()
                  .flows.all;
                const updatedFlow = updatedAllFlows.filter(
                  (obj, index) => {
                    return obj.key === url.flow_key;
                  }
                );

                // If flow still not found, go home
                if (updatedFlow.length == 0) {
                  console.log(
                    '[DeepLink] desired flow still not found; returning to home screen'
                  );
                  Actions.reset('mainTabs');
                } else {
                  console.log(
                    '[DeepLink] timer ended -- flow successfully fetched!'
                  );
                }
              }, 5000);
            } else {
              console.log('[DeepLink] flow found locally!');

              // Go to selected flow
              dispatch(selectFlow(flow[0]));
              dispatch(
                subFlowsFetch(
                  flow[0].flow_key,
                  (sub_flows) => {
                    Actions.flowDescription({
                      flowCategory: flow[0].flow_categories,
                      title: flow[0].label,
                      duration: url.duration,
                      imageUri: flow[0].image_uri,
                      lock: url.lock,
                      dynamicPacingSupport:
                        url.dynamic_pacing_support,
                      choiceSupport: url.choice_support,
                      sub_flows,
                      flow: flow[0],
                    });
                  }
                )
              );
            }

            // Check if DeepLink is an undefined flow
          } else if (
            url.scene_key === 'flowDescription' &&
            url.flow_key === undefined
          ) {
            console.log(
              '[DeepLink] Error: flow key is undefined'
            );

            // DeepLink is not a flow
          } else {
            console.log(
              '[DeepLink] scene_key is NOT a flow: ',
              url.scene_key
            );

            // Try to go to screen specified by scene_key
            try {
              Actions[url.scene_key]();
            } catch (err) {
              console.log(
                '[DeepLink] Error: invalid scene_key'
              );
            }
          }
        } else {
          console.log(
            '[DeepLink] scene_key does not exist'
          );
        }
      } else {
        console.log('[DeepLink] bootstrap not completed!');

        if (
          url.hasOwnProperty('scene_key') &&
          url.scene_key !== 'flowDescription'
        ) {
          setTimeout(() => {
            if (
              allFlows.getState().app_bootstrap
                .completed === true
            ) {
              console.log(
                '[DeepLink] bootstrap completed for screen: ',
                url.scene_key
              );
              try {
                Actions[url.scene_key]();
              } catch (err) {
                console.log(
                  '[DeepLink] Error: invalid scene_key'
                );
              }
            }
          }, 2000);
        } else if (
          url.hasOwnProperty('scene_key') &&
          (props.flow_id === url.scene_key) ===
            'flowDescription'
        ) {
          setTimeout(() => {
            if (
              allFlows.getState().app_bootstrap
                .completed === true
            ) {
              // Check for flows in updated store
              const bootstrap_updatedAllFlows = allFlows.getState()
                .flows.all;
              const bootstrap_updatedFlow = bootstrap_updatedAllFlows.filter(
                (obj, index) => {
                  return obj.key === url.flow_key;
                }
              );

              // If flow still not found, go home
              if (bootstrap_updatedFlow.length == 0) {
                console.log(
                  '[DeepLink] desired flow still not found; returning to home screen (2)'
                );
                Actions.reset('mainTabs');
              } else {
                console.log(
                  '[DeepLink] timer ended -- flow successfully fetched! (2)'
                );
              }
            }
          }, 5000);
        }
      }
    };
  }, []);

  console.log(props.flow_id);
  // Handle DeepLink
  return (
    <View>
      <Text>{props.flow_id}</Text>
    </View>
  );
};

export default DeepLink;

标签： reactjsreact-nativereduxreact-reduxdeep-linking

我无法完全解读您在 useEffect 中尝试执行的操作，但如果您尝试对 props.flow_id 中的更改做出反应，请将其添加到 useEffect 中的数组中，如下所示：

useEffect(()=>{
  //your code here
}, [props.flow_id])

这样，useEffect 函数将在 props.flow_id 更改时运行。

此外，看起来您只是在 useEffect 中声明该函数而不是调用它。如果您希望它在值更改时运行，请在其他地方定义函数并在您的 useEffect 中调用它，就像这样。

const myComponent =(props) => {
  const onDeepLink = (url) => {
  //your function code
  }

  useEffect((url) => {
    onDeepLink(url);
  }, [onDeepLink]);
  
  return(<View/>)
 }

我不确定“url”变量的来源，但您还需要将 is 添加到 useEffect 的数组中。

您可能还想看看这个链接： https ://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

reactjs - 没有为 deepLink 调用 useEffect 中的函数

问题描述

解决方案

推荐阅读