Lucifier129 / react-lite

An implementation of React v15.x that optimizes for small script size
MIT License
1.73k stars 98 forks source link

Can not read property '$ updater' of undefined. #93

Closed GrubbyHunter closed 7 years ago

GrubbyHunter commented 7 years ago

we develop the use of react-lite for build project, when i in the react componentWillReceiveProps method dispatch an action , the react-lite will show zhe error : Can not read property '$ updater' of undefined., but i use react to build project will not report this error.

I know you have a fix in the previous version of this problem(https://github.com/Lucifier129/react-lite/issues/82), but I use the new master code when I will report this error, so i don't no how to fix it

Lucifier129 commented 7 years ago

Maybe there are not the same problem, can you try dispatch an action in componentDidUpdate?

jensneuse commented 7 years ago

I've got the same problem in conjunction with redux connect.

To reproduce: create a redux action + connect it to a component create handler func inside the component, calling the connected action trigger handler func from ui

The error occurs in the same method as #82, but a few lines up. I can give detailed information if required.

Lucifier129 commented 7 years ago

@jnsone11 a few line of real code will be great!!

jensneuse commented 7 years ago

action:

export const navigateTo = (location) => {
    return (dispatch) => {

        dispatch({
            type: NAVIGATE_TO,
            to: location
        });

        browserHistory.push(location);
    }
};

reducer:

import {OPEN_DRAWER,CLOSE_DRAWER,TOGGLE_DRAWER} from '../const.js'

const drawer = (state = {},action) => {

    switch(action.type){
        case OPEN_DRAWER:
        return {isOpen : true};
    case CLOSE_DRAWER:
        return {isOpen : false};
    case TOGGLE_DRAWER:
        return {isOpen : !state.isOpen}
    }

    return state;
};
export default drawer

combineReducers:

const combinedReducers = combineReducers({
    routing : routerReducer,
    drawer,
});

export default combinedReducers

store:

const store = createStore(combinedReducers,initialState,applyMiddleware(thunk));

drawerComponent:

import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import {connect} from 'react-redux';
import {open, close, navigateTo} from '../actions/drawer'
import {APP_TITLE} from '../const';
import AppBar from 'material-ui/AppBar';

const DrawerComponent = React.createClass({

    navigateTo(e, location){
        this.props.navigateTo(location);
        this.closeDrawerOnSmallScreen();
    },

    closeDrawerOnSmallScreen(){
        if (!this.props.largeScreen && this.props.isOpen) {
            this.props.close();
        }
    },

    drawerOnRequestChange(open, reason){
        if (reason == 'swipe' || reason == 'clickaway') {
            if (open) {
                this.props.open();
            } else {
                this.props.close();
            }
        }
    },

    render(){

        const topMargin = 0;
        const style = this.props.largeScreen ? {width: 180, marginTop: topMargin} : {width: 200, marginTop: topMargin};

        return (
            <Drawer
                overlayStyle={{marginTop: topMargin}}
                containerStyle={style}
                open={this.props.isOpen}
                onRequestChange={(open, reason) => this.drawerOnRequestChange(open, reason)}
                docked={this.props.largeScreen}>
                    title={APP_TITLE}
                <MenuItem onTouchTap={(e) => this.navigateTo(e, '/')}>Home</MenuItem>
            </Drawer>
        );
    }
});

export default connect(state => {
    return {isOpen: state.drawer.isOpen, largeScreen: state.screen.largeScreen}
}, {open, close, navigateTo})(DrawerComponent)

this.closeDrawerOnSmallScreen() fails at line 2513 in react lite js I guess.

Please let me know if I can contribute any further.

Lucifier129 commented 7 years ago

@jnsone11 react-lite can't work with react-tap-event-plugin, please use fastclick instead. or add alias 'react-tap-event-plugin': 'react-lite/lib/react-tap-event-plugin', just like here

jensneuse commented 7 years ago

It seems like something was wrong with my aliasing. I aliased tap event plugin but did not install fastclick.

Seems like everything is working now. I came down from 123kb to 92.3kb.

One tradeoff, it seems I don't get hover events anymore for Menuitems in the Drawer.

Lucifier129 commented 7 years ago

@jnsone11 react-lite/lib/react-tap-event-plugin will require('fastclick'), fastclick should be installed.

GrubbyHunter commented 7 years ago

我找到原因了,我是在componentWillReceiveProps方法里面setState,然后再componentDidUpdate里面dispatch一个action就报错了

Lucifier129 commented 7 years ago

@GrubbyHunter 解决了吗?

GrubbyHunter commented 7 years ago

暂时没有,我在15.15版本的基础上加上这个修改方案 (https://github.com/Lucifier129/react-lite/commit/44dd19e5a846a1d9dff35aef0d31edf6129da5af) 能解决,但是在master主干代码上使用 (https://github.com/Lucifier129/react-lite/commit/44dd19e5a846a1d9dff35aef0d31edf6129da5af) 这个方案就不行。可能是后续的版本有冲突,因为公司现在用的最新的代码已经部署上线了,没办法用旧版本去fix,所以我还得看看

Lucifier129 commented 7 years ago

@GrubbyHunter 是用这份代码吗?

GrubbyHunter commented 7 years ago

不是,这份已经修复过了,是这个 (https://github.com/Lucifier129/react-lite/blob/0.15.15/src/virtual-dom.js) 主要是改这个文件改完打包就没报错了

Lucifier129 commented 7 years ago

@GrubbyHunter 我不是很明白你的意思。是指目前 master 分支的 react-lite 无法解决问题,而 0.15.15 版本的代码加上那个 pull request 修改可以解决问题?

GrubbyHunter commented 7 years ago

是的

Lucifier129 commented 7 years ago

@GrubbyHunter 难以理解~~

Lucifier129 commented 7 years ago

@GrubbyHunter 明天看看

GrubbyHunter commented 7 years ago

好的

GrubbyHunter commented 7 years ago

我 fork了自己修改了下可以正常跑了,你看下

GrubbyHunter commented 7 years ago

我fixed是15.30版本,你能不能帮review下然后合并到15.30里面啊,因为我们项目现在用的15.30版本