javascript - React setstate只能在重新渲染时更新已安装或正在安装的组件

我正在使用react-speech-recognition包在我的应用程序中进行语音转文本。

内部呈现的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>

如上所示，我的ChatContainer有两个Children:

SpeechToText

包含按钮的

div
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从props接收语音识别Speech 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);

最后，ChatContainer决定要呈现的child。如果状态为非 Activity ，则使用非 Activity 按钮渲染div。

编辑

默认情况下，状态为非 Activity 状态-this.state.micActive: false。如果状态为非 Activity 状态，则使用<div>呈现button。如果单击该按钮，则会调用makeActive方法并使状态变为 Activity 状态；如果状态为 Activity 状态，我将渲染<SpeechToText>。完成语音转文本后，我将其称为makeInactive-使状态变为非 Activity 状态，并且<div>再次呈现

第一次单击按钮SpeechToText会呈现，并且语音转文本功能正常。

但是第二次我单击按钮-并且尝试重新渲染SpeechToText组件时出现错误:

setstate can only update a mounted or mounting component

有时不会出现错误，但语音转文字功能无效。

为什么会发生这种情况-也许我需要强制删除组件吗？

最佳答案

原来这是SpeechRecognitionContainer的问题。
该软件包已使用新的 Prop 和配置选项进行了更新，并且我解决了我的问题。

您可以阅读有关react-speech-recognition here的更多信息。

现在，我可以像这样渲染组件:

render() {
    return (
        <SpeechToText
          sendSpeechToText={this.sendSpeechToText}

        />
    );
}

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

关于javascript - React setstate只能在重新渲染时更新已安装或正在安装的组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45227151/