今天和大家聊一聊taro2.x版本useEffect中改变observable对象导致的Effect执行2次问题
问题现象
话不多说,先看代码。
代码很简单,Taro+mobx在函数组件内使用,并且在useEffect中更新test的状态。注意此时useEffect传入了空数组
import Taro, { useEffect } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { observer } from '@tarojs/mobx';
import { indexStore } from './store';
const IndexPage = () => {
const { test, setTest } = indexStore;
console.log('test状态', test)
useEffect(() => {
setTest(true);
console.log('执行effect')
}, []);
return (
<View style='margin:100px'>{`测试页面${test}`}</View>
);
}
export default observer(IndexPage);
import {
observable, action } from 'mobx'
class IndexStore {
@observable test: boolean = false
@action
setTest = (value: boolean) => {
this.test = value
}
}
export const indexStore