Javascript 替换组件willmount（）

我正在尝试使用来自的代码

我应该如何更新代码以适应弃用的

组件willmount

生命周期方法

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>
            )
        }
    }
}

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

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);

constcreatestore=（WrappedComponent，initialValue）=>{
返回类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={storage:{…initialValue}}；
}
组件willmount（）{
让存储={
get：（键）=>{
返回此.state.storage[key]；
},
设置：（键，值）=>{
const state=this.state.storage；
状态[键]=值；
本.设置状态（状态）；
},
删除：（键）=>{
const state=this.state.storage；
删除状态[键]；
本.设置状态（状态）；
}
}
this.setState（{store}）；
}
render（）{
返回(
)
}
}
}

带存储

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>
            )
        }
    }
}

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

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);

constwithstore=（WrappedComponent）=>{
返回类扩展了React.Component{
render（）{
返回(
{context=>}
)
}
}
}

使用存储的主页

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>
            )
        }
    }
}

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

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);

class Home扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
getUser（）。然后（（用户）=>{
this.props.store.set（'user'，user）；
});
}
render（）{
const user=this.props.store.get（'user'）；
返回(
{user.firstname}
);
}
}
const styles=StyleSheet.create({
主页：{
弹性：1，
flexDirection:“列”
}
});
使用存储导出默认值（主）；

据我所知，您希望在状态中声明存储，并使用对象中定义的某些函数对其进行操作。您不需要将此对象置于您的状态中。相反，您应该将其保留在组件实例上，如下所示：

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

。

将其放入

componentDidMount

？当然我试过了，但是

store.get

，如果我这样做，则不会为我的使用者定义

store.set

和

store.remove

。您可以在声明state@Tarun这是正确的答案+删除

setState

@davmich在构造函数中我在哪里调用了

setState

？包含

setState

调用的函数不会在构造函数中执行，因此它不应该是一个问题。