替换componentWillMount()

问题描述 投票:-1回答:1

我正在尝试使用https://github.com/Spyna/react-store/blob/master/src/createStore.js的代码

我应该如何更新代码以适应不推荐使用的componentWillMount生命周期方法?

CreateStore

const createStore = (WrappedComponent, initialValue) => {
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.state = { storage: { ...initialValue } };
        }

        componentWillMount() {
            let store = {
                get: (key) => {
                    return this.state.storage[key];
                },
                set: (key, value) => {
                    const state = this.state.storage;
                    state[key] = value;
                    this.setState(state);
                },
                remove: (key) => {
                    const state = this.state.storage;
                    delete state[key];
                    this.setState(state);
                }
            }

            this.setState({ store });
        }

        render() {
            return (
                <StoreContext.Provider value={{ store: this.state.store }}>
                    <WrappedComponent {...this.props} />
                </StoreContext.Provider>
            )
        }
    }
}

WithStore

const withStore = (WrappedComponent) => {
    return class extends React.Component {
        render() {
            return (
                <StoreContext.Consumer>
                    {context => <WrappedComponent store={context.store} {...this.props} />}
                </StoreContext.Consumer>
            )
        }
    }
}

主页使用withStore

class Home extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        getUser().then((user) => {
            this.props.store.set('user', user);
        });
    }

    render() {
        const user = this.props.store.get('user');
        return (
            <View style={styles.home}>
                <Text>{user.firstname}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    home: {
        flex: 1,
        flexDirection: 'column'
    }
});

export default withStore(Home);
javascript reactjs
1个回答
0
投票

根据我的理解,您希望在状态中声明存储并使用对象内定义的某些函数对其进行操作。您不需要在您的州内拥有此对象。相反,你应该将它保存在组件实例上,如下所示:

constructor(props) {
            super(props);
            this.state = { 
                storage: {...initialValue} 
            };
            this.storageHelper = {
                get: (key) => {
                    return this.state.storage[key];
                },
                set: (key, value) => {
                    const state = this.state.storage;
                    state[key] = value;
                    this.setState(state);
                },
                remove: (key) => {
                    const state = this.state.storage;
                    delete state[key];
                    this.setState(state);
                }  
            }
  }

相应地使用this.storageHelper

© www.soinside.com 2019 - 2024. All rights reserved.