[英]React setstate can only update a mounted or mounting component — on rerender
I am using the react-speech-recognition
package to do speech-to-text in my app. 我正在使用react-speech-recognition
软件包在我的应用程序中进行语音到文本。
Inside render of app.js: 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, my ChatContainer
has two Children
: 如上所示,我的ChatContainer
有两个Children
:
SpeechToText
div
that contains a button div
包含一个按钮
SpeechToText.js : 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 the speech recognition props
from Speech Recognition
SpeechToText
从Speech Recognition
接收语音识别props
ChatContainer.js 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
to render. 最后, ChatContainer
决定要渲染的child
ChatContainer
。 If the state is inactive render the div
with the inactive button. 如果状态为非活动状态,则使用非活动按钮渲染div
。
EDIT 编辑
By default the state in inactive -- this.state.micActive: false
. 默认情况下,状态为inactive - this.state.micActive: false
。 If the state is inactive I render the <div>
with the button
. 如果状态为非活动状态,则使用button
渲染<div>
。 If that button is clicked the makeActive
method gets called and makes the state active -- if the state is active I render <SpeechToText>
. 如果单击该按钮,则调用makeActive
方法并使状态处于活动状态 - 如果状态为活动状态,则呈现<SpeechToText>
。 Once I complete the voice-to-text I call makeInactive
-- that makes the state inactive and the <div>
is rendered once again 一旦我完成了语音转文本,我就调用makeInactive
- 这会使状态处于非活动状态,并再次呈现<div>
The first time I click the button SpeechToText
gets rendered and voice-to-text works. 我第一次单击按钮SpeechToText
得到渲染,语音到文本工作。
However the second time I click the button -- And I try to rerender the SpeechToText
component I get an error: 但是第二次单击按钮 - 我尝试重新SpeechToText
组件时出现错误:
setstate can only update a mounted or mounting component
Sometimes the error does not appear but the voice-to-text does not work. 有时错误不会出现,但语音到文本不起作用。
Why is this happening - Do I need to force remove the component perhaps? 为什么会发生这种情况 - 我是否需要强行删除组件?
Turns out it was an issue with the SpeechRecognitionContainer
. 事实证明,这是SpeechRecognitionContainer
一个问题。 The package was updated with new props and configuration options and I resolved my issue. 该软件包更新了新的道具和配置选项,我解决了我的问题。
You can read more about react-speech-recognition
here . 您可以在此处阅读有关react-speech-recognition
更多信息。
Now simply I can render the component like so: 现在我可以像这样渲染组件:
render() {
return (
<SpeechToText
sendSpeechToText={this.sendSpeechToText}
/>
);
}
and SpeechToText looks something likes this: 和SpeechToText看起来像这样:
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.