未为deepLink调用useEffect内的函数

Question

下午好，我正在尝试使用react原生的react路由器流量来设置deepLinking，但是我的useEffect内部的函数似乎没有运行。我相信这可能是因为它没有正确地理解状态。当我访问flow_id的网址时，它只是在UI中呈现我放在网址中的内容，但函数不会运行。它应该获取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;

Answer 1

您需要定义一个单独的函数定义，并在useEffect中传递该函数。

以下是可能的解决方案

useEffect(() => {
abc();
}, [dependency])

const abc = () => {
///function defination

}

Answer 2

我不能完全理解你试图在你的useEffect中做什么，但是如果你试图对props.flow_id中的变化做出反应，就像这样将它添加到你的useEffect中的数组中：

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

这样，只要props.flow_id发生变化，useEffect函数就会运行。

而且，看起来您只是在useEffect中声明函数，而不是调用它。如果您希望它在值更改时运行，请在其他地方定义该函数，并在useEffect中调用它，如下所示。

​

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

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

​

我不确定'url‘变量从何而来，但您也需要将其添加到useEffect的数组中。

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