React setstate can only update mounted or mounted component - on rerender
I am using a react-speech-recognition
speech to text translation package in my application.
Inside the rendering app.js:
<ChatContainer
micActive={this.state.micActive}
sendData={this.sendData}
makeInactive={this.makeInactive}
>
<SpeechToText>
sendData={this.sendData}
makeInactive={this.makeInactive}
micActive={this.state.micActive}
</SpeechToText>
<div>
<button
id="micInactive"
type="button"
onClick={this.makeActive}
/>
</div>
</ChatContainer>
As you can see above mine ChatContainer
has two Children
:
-
SpeechToText
-
div
which contains the button
SpeechToText.js:
class SpeechToText extends Component {
componentWillReceiveProps(nextProps) {
if (nextProps.finalTranscript && nextProps.micActive) {
this.props.sendData(nextProps.finalTranscript);
this.props.resetTranscript();
this.props.makeInactive();
}
}
render() {
return (
<div>
<button
id="micActive"
type="button"
/>
</div>
);
}
}
export default SpeechRecognition(SpeechToText);
SpeechToText
receives speech recognition props
fromSpeech Recognition
ChatContainer.js
const ChatContainer = props => (
<div>
{
React.Children.map(props.children, (child, i) => {
if (i === 0 && child.props.active) {
return React.cloneElement(child, {
sendData: props.sendData,
makeInactive: props.makeInactive,
micActive: props.micActive,
});
}
if (i === 1 && child.props.inactive) {
return child;
}
return null;
})
}
</div>
);
export default connect()(ChatContainer);
Finally ChatContainer
decides which child
render to render. If the state is inactive, display it div
using the inactive button.
EDIT
By default, the state is inactive - this.state.micActive: false
. If the state is inactive, I show it <div>
with button
. If this button is clicked, the method makeActive
is called and makes the state active - if the state is active, I render <SpeechToText>
. As soon as I complete the voice to text I call makeInactive
- this makes the state inactive and <div>
is displayed again
The first time I click the button SpeechToText
, it renders and the voice-text works.
However, the second time I click the button - And I try to reload the component SpeechToText
, I get the error:
setstate can only update a mounted or mounting component
Sometimes the error doesn't appear, but voice to text doesn't work.
Why is this happening? Do I need to forcefully remove a component?
source to share
It turns out this is a problem with SpeechRecognitionContainer
. The package was updated with new props and config options and I resolved the issue.
Read more about react-speech-recognition
here .
Now I can just render the component like this:
render() {
return (
<SpeechToText
sendSpeechToText={this.sendSpeechToText}
/>
);
}
and the SpeechToText looks something like this:
class SpeechToText extends Component {
constructor(props) {
super(props);
this.reactivate = this.reactivate.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.finalTranscript && nextProps.micActive) {
this.props.sendSpeechToText(nextProps.finalTranscript);
this.props.resetTranscript();
this.props.stopListening();
}
}
componentWillUnmount() {
if (this.props.listening) {
this.props.abortListening();
}
}
reactivate() {
if (!this.props.listening) {
this.props.startListening();
}
render() {
return (
<div>
<button
id="micButton"
type="button"
onClick={this.reactivate}
/>
</div>
);
}
}
const options = {
autoStart: false
}
export default SpeechRecognition(options)(SpeechToText)
source to share