為什么 React JS useEffect hook 不刷新文本？

Question

我正在使用 Google Speech-To-Text API 使用用戶的語音回答我的 web 頁面的問題。 在這種情況下，我已經正確創建了所有 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')); ```

當我刷新 web 頁面時，所有語音文本都顯示在#text-field 中，而不刷新 web 頁面我無法獲得語音文本。 請幫助我在不刷新 web 頁面的情況下更新#text-field 。

Answer 1

由於 useEffect 的依賴數組是空數組，它只運行一次。 您可以參考這些鏈接

• 在 useEffect 中，不提供依賴數組和空數組有什么區別？
• https://reactjs.org/docs/hooks-effect.html

Answer 2

不要忘記，為了讓useEffect獲取 state 中的任何更改，您必須通過依賴數組傳遞一個指向它的指針。

const [data, setData] = useState([]);

useEffect(() => {
  socket.on('speech', textOfSpeech => {
    setData(currentData => [...currentData, textOfSpeech ]);
  });
}, [data]);

查看文檔以更好地了解useEffect如何“在幕后”工作:)

Answer 3

相反，你的代碼是正確的，你不需要依賴依賴數組，因為它會導致鈎子在每次依賴變化時運行，實際上這將導致語音的多個寄存器相同的處理程序，並且作為回報將導致您的語音事件處理程序僅與一個不好的事件一起運行。

有了你的代碼，你可以開始簡單的調試

socket.on('speech', speech => {
 // console.log('does this receive speech')?
});

也就是說，socket事件是否運行？...從那里開始。 嘗試不同的瀏覽器，但你的代碼只是好孩子！

如果控制台工作，那么我們可以開始考慮鈎子