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