reactjs - 如何在反应语音识别中设置默认输出消息？

Question

我正在使用网络语音 API 在 Reactjs 中创建语音识别应用程序。所以我给出了两个命令并尝试使用语音获取输出，我得到的输出与我设置的相同。但问题是当我说其他内容而不是 set 命令时，它会返回先前的输出。如何解决这个问题，就像我想在用户的输入与应该输出的消息不匹配时设置默认消息......代码......

import { useEffect } from "react";
import "./App.css";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";
import React, { useState } from "react";

const App = () => {
  let [message, setMessage] = useState("");
  const commands = [
    {
      command: "hello",
      callback: () => setMessage("Hi... how can i help you ?"),
      matchInterim: true,
    },
    {
      command: "how are you",
      callback: () => setMessage("I am good ........."),
      matchInterim: true,
    },
  ];
  const { transcript } = useSpeechRecognition({ commands });
  return (
    <div>
      <div className="headerText">
        <h1>Speech Recognition App</h1>
      </div>
      <div className="output-container">
        <p>{transcript}?</p>
        <p>{transcript ? message : "Say something........."}</p>
      </div>
      <div className="button-container">
        <button className="btn-1" onClick={SpeechRecognition.startListening}>
          Start Listening
        </button>

        <button className="btn-2" onClick={SpeechRecognition.stopListening}>
          Stop Listening
        </button>
        <button className="btn-3" onClick={needtoadd}>
          Reset
        </button>
      </div>
    </div>
  );
};
export default App;

标签： reactjs

Answer 1

您收到上一条消息是因为您没有使用默认消息更新状态。在回调函数中，您在匹配时更新消息，但在不匹配时不更新消息状态，这就是您收到上一条消息的原因。

要解决此问题，您可以使用 Switch Case，这样当命令匹配时，状态将相应更新，否则默认更新状态消息。

matchCommand(data) {
  data.map(item => {
    switch (item.command) {
      case "hello": 
        // Set the state instead of returning a function that sets the state
        setMessage("Hi... how can i help you ?");
        break;
      case "how are you": 
        setMessage("I am good .........");
        break;
      default: 
        setMessage("Default message");
        break;
    };
  }); 
}