无法使用函数更新 React 上下文中的状态

Question

我目前有两个上下文-GalleryContext&AdminContext

在AdminContext中，每当我启动handleSendImage((时，我都会尝试从GalleryContext调用一个函数(getGallery(((，该函数会更新GalleryContext中的库状态。

但是，我收到了以下错误：未处理的拒绝(TypeError(：this.setState不是函数

有人能告诉我如何解决这个问题吗？非常感谢！

这是我的代码：

GalleryContext:

class GalleryProvider extends Component {
state = {
gallery: []
};
getGallery() {
let database = firebase
.database()
.ref("/gallery/")
.once("value")
.then(images => {
console.log(images.val());
this.setState(
{
gallery: images.val()
},
() => {}
);
});
}
componentDidMount() {
this.getGallery();
}
render() {
return (
<GalleryContext.Provider
value={{
...this.state,
getGallery: this.getGallery
}}>
{this.props.children}
</GalleryContext.Provider>
);
}
}

AdminContext.js

class AdminProvider extends Component {
static contextType = GalleryContext;
state = {
upload_image: null,
gallery_title: null,
gallery_description: null,
gallery_filename: null,
progress: null
};
handleSendImage = (event, gallery, user) => {
event.preventDefault();
const { upload_image } = this.state;
firebase
.storage()
.ref(`images/${upload_image.name}`)
.put(upload_image)
.on(
"state_changed",
snapshot => {
// progrss function ....
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
this.setState({
progress
});
},
error => {
// error function ....
console.log(error);
},
() => {
// complete function ....
firebase
.storage()
.ref("images")
.child(upload_image.name)
.getDownloadURL()
.then(url => {
const newImage = {
description: this.state.gallery_description,
download_url: url,
file_name: this.state.gallery_filename,
id: gallery.length,
uploader_uid: user.uid
};
firebase
.database()
.ref("/gallery/")
.child(gallery.length)
.set(newImage)
.then(() => {
this.context.getGallery();
})
.catch(error => {
console.log(error);
});
});
}
);
};
render() {
return (
<AdminContext.Provider
value={{
...this.state
handleSendImage: this.handleSendImage
}}>
{this.props.children}
</AdminContext.Provider>
);
}
}

Answer 1

由于您使用的是state，因此您需要为类组件提供构造函数，并需要在构造函数中绑定方法。我建议你尝试以下代码：

class AdminProvider extends Component {
static contextType = GalleryContext;
constructor(props) { 
super(props)
this.state = {
upload_image: null,
gallery_title: null,
gallery_description: null,
gallery_filename: null,
progress: null
};
this.handleSendImage = this.handleSendImage.bind(this);
}
handleSendImage = (event, gallery, user) => {
event.preventDefault();
const { upload_image } = this.state;
firebase
.storage()
.ref(`images/${upload_image.name}`)
.put(upload_image)
.on(
"state_changed",
snapshot => {
// progrss function ....
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
this.setState({
progress
});
},
error => {
// error function ....
console.log(error);
},
() => {
// complete function ....
firebase
.storage()
.ref("images")
.child(upload_image.name)
.getDownloadURL()
.then(url => {
const newImage = {
description: this.state.gallery_description,
download_url: url,
file_name: this.state.gallery_filename,
id: gallery.length,
uploader_uid: user.uid
};
firebase
.database()
.ref("/gallery/")
.child(gallery.length)
.set(newImage)
.then(() => {
this.context.getGallery();
})
.catch(error => {
console.log(error);
});
});
}
);
};
render() {
return (
<AdminContext.Provider
value={{
...this.state
handleSendImage: this.handleSendImage
}}>
{this.props.children}
</AdminContext.Provider>
);
}
}

类似：

class GalleryProvider extends Component {
constructor(props) { 
super(props);
this.state = {
gallery: []
};
this.getGallery = this.getGallery.bind(this);
}
getGallery() {
let database = firebase
.database()
.ref("/gallery/")
.once("value")
.then(images => {
console.log(images.val());
this.setState(
{
gallery: images.val()
},
() => {}
);
});
}
componentDidMount() {
this.getGallery();
}
render() {
return (
<GalleryContext.Provider
value={{
...this.state,
getGallery: this.getGallery
}}>
{this.props.children}
</GalleryContext.Provider>
);
}
}

或者，您可以在功能组件中使用React Hooks。希望这能解决你的问题。

我建议您阅读React关于Constructor的文档以了解更多信息。