结合redux使用时，useEffect中使用setNavigationBarTitle，当在下层级页面修改数据，会在下层级页面中修改标题，而不是期望的回到当前页面再改变

[xiaoyuze88]

问题描述

1. A页面中，useEffect监听一个redux中的值来动态设置标题
2. 进入下一级B页面，在B中改变redux中的值
3. 触发了A页面的useEffect，并将B页面的标题设置为了redux中的值
4. 返回A页面，标题无变化（因为值改变的监听器已经被B页面消费）

复现步骤

如上

/**
 * 这段注释后可以贴代码
 * 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间
 * 代码提供不全或代码格式混乱的 issues 【有可能会被忽略】
 * 
 * 查看如何插入代码：https://coding.net/help/doc/project/markdown.html#i-5
 */

期望行为

A中的useEffect仅在A页面激活时触发，而不是在B页面中调用A页面的useEffect

报错信息

无

系统信息

👽 Taro v1.3.28

Taro CLI 1.3.28 environment info:
System:
OS: macOS 10.14
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.3 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.5.1 - /usr/local/bin/npm
npmPackages:
@tarojs/async-await: ^1.3.28 => 1.3.28
@tarojs/components: ^1.3.28 => 1.3.28
@tarojs/plugin-babel: ^1.3.28 => 1.3.28
@tarojs/plugin-csso: ^1.3.28 => 1.3.28
@tarojs/plugin-less: ^1.3.28 => 1.3.28
@tarojs/plugin-uglifyjs: ^1.3.28 => 1.3.28
@tarojs/redux: ^1.3.28 => 1.3.28
@tarojs/router: ^1.3.28 => 1.3.28
@tarojs/taro: ^1.3.28 => 1.3.28
@tarojs/taro-weapp: ^1.3.28 => 1.3.28
@tarojs/webpack-runner: ^1.3.28 => 1.3.28
eslint-config-taro: ^1.3.28 => 1.3.28
eslint-plugin-taro: ^1.3.28 => 1.3.28
nerv-devtools: ^1.5.0 => 1.5.1
nervjs: ^1.5.0 => 1.5.1
stylelint-config-taro-rn: ^1.3.28 => 1.3.28
npmGlobalPackages:
typescript: 1.8.10

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[xiaoyuze88]

目前要实现期望特性只能自己用hooks来处理了。

export function useSetPageTitle(title) {
  const lastTitleRef = useRef('');
  const pageOnShowRef = useRef(false);

  const doSetTitle = (title) => {
    if (lastTitleRef.current !== title) {
      lastTitleRef.current = title;
      Taro.setNavigationBarTitle({ title });
    }
  };

  useDidShow(() => {
    pageOnShowRef.current = true;

    doSetTitle(title);
  });

  useDidHide(() => {
    pageOnShowRef.current = false;
  });

  useEffect(() => {
    if (pageOnShowRef.current) {
      doSetTitle(title);
    }
  }, [title]);
}

[dpyzo0o]

我也碰到过这个问题，我的理解是，因为进入下一页并不会销毁之前的页面，所以之前的页面由于订阅的redux值变了导致重新渲染，执行了相应的代码。我觉得，是不是你在之前那个页面的 useDidshow 里面再设置一遍title就行了

[dpyzo0o]

然后你这样的写法，如果页面中还需要用到 useDidShow useDidHide 怎么办？ 我不知道是不是可以同时有多个 useDidShow 存在同一个页面组件中

[Chen-jj]

@xiaoyuze88

@dpyzo0o 正解。小程序不像 H5，并没有销毁上一个页面，useEffect 执行是正确的。useDidShow 里处理吧。

[Chen-jj]

@dpyzo0o 可以重复。会叠加调用。

taro/packages/taro/src/hooks.js

Lines 40 to 63 in 205d62d

	function usePageLifecycle (callback, lifecycle) {
	const hook = getHooks(Current.index++)
	if (!hook.marked) {
	hook.marked = true
	hook.component = Current.current
	hook.callback = callback
	const component = hook.component
	const originalLifecycle = component[lifecycle]
	hook.component[lifecycle] = function () {
	const callback = hook.callback
	originalLifecycle && originalLifecycle.call(component, ...arguments)
	return callback && callback.call(component, ...arguments)
	}
	} else {
	hook.callback = callback
	}
	}
	export function useDidShow (callback) {
	usePageLifecycle(callback, 'componentDidShow')
	}