我正在使用 Google Speech-To-Text API 使用用戶的語音回答我的網頁問題。在這種情況下，我已經正確創建了所有 Node JS 服務器端功能，當我啟動 API 時，服務器使用 webSockets 不斷地向客戶端發送語音文本。我的問題出在 React JS client.js 檔案上。當從服務器接收到客戶端的語音文本時，useEffect不會重繪 Web 瀏覽器的#text-field(input tag)。
客戶端.js 檔案
import io from 'socket.io-client';
import React from 'react';
import ReactDOM from 'react-dom';
import { useEffect, useState } from 'react';
const socket = io('http://localhost:3000', {
transports: ['websocket', 'polling']
});
const App = ({}) => {
const [data, setData] = useState([]);
useEffect(() => {
socket.on('speech', textOfSpeech => {
setData(currentData => [...currentData, textOfSpeech ]);
});
}, []);
return (
<div>
<h1>Message</h1>
<input id="text-field" type="text" value={data.join('')}/>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root')); ```
當我重繪 網頁時，所有語音文本都顯示在#text-field 中，如果不重繪 網頁，我就無法獲取語音文本。請幫助我在不重繪 網頁的情況下更新#text-field。
uj5u.com熱心網友回復：
不要忘記，為了獲取useEffect狀態的任何變化，您必須通過依賴陣列傳遞一個指向它的指標。
const [data, setData] = useState([]);
useEffect(() => {
socket.on('speech', textOfSpeech => {
setData(currentData => [...currentData, textOfSpeech ]);
});
}, [data]);
查看檔案以更好地了解useEffect“幕后”的作業原理:)
uj5u.com熱心網友回復：
相反，你的代碼是正確的，你不需要依賴于依賴陣列，因為它會導致鉤子在每次依賴變化時運行，實際上這將導致語音的同一處理程式的多個暫存器，并且作為回報將導致您的語音事件處理程式僅與一個不好的事件一起運行。
有了你的代碼，你可以開始簡單的除錯
socket.on('speech', speech => {
// console.log('does this receive speech')?
});
也就是說，socket事件是否運行？...從那里開始。嘗試不同的瀏覽器，但你的代碼只是好孩子！
如果控制臺作業，那么我們可以開始考慮鉤子
uj5u.com熱心網友回復：
由于 useEffect 的依賴陣列是空陣列，它只運行一次。您可以參考這些鏈接
- 在 useEffect 中，不提供依賴陣列和空陣列有什么區別？
- https://reactjs.org/docs/hooks-effect.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/418264.html
標籤：
上一篇：承諾不按預期作業的誤解？