为什么 React JS useEffect hook 不刷新文本？答案

【问题标题】：Why React JS useEffect hook is not refreshing the text?为什么 React JS useEffect hook 不刷新文本？
【发布时间】：2022-01-22 06:06:54
【问题描述】：

我正在使用 Google Speech-To-Text API 使用用户的语音回答我的网页问题。在这种情况下，我已经正确创建了所有 Node JS 服务器端功能，当我启动 API 时，服务器使用 webSockets 不断地向客户端发送语音文本。我的问题出在 React JS client.js 文件上。当收到服务器发给客户端的语音文本时，useEffect不是刷新 #text-field(input tag) 的网络浏览器。

client.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。

【问题讨论】：

标签： javascript reactjs websocket use-effect page-refresh

【解决方案1】：

不要忘记，为了让useEffect 获取您状态的任何变化，您必须通过依赖数组传递一个指向它的指针。

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

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

查看docs 以更好地了解useEffect 如何“在后台”工作:)

【讨论】：

【解决方案2】：

在相反的儿子，你的代码是正确的，你不需要依赖于依赖数组，因为它会导致钩子在每次依赖变化时运行，实际上这将导致同一处理程序的多个寄存器用于语音和作为回报，这将导致您的语音事件处理程序只运行一个不好的事件。

有了你的代码，你就可以开始简单的调试了

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

也就是说，socket事件是否运行？...从那里开始。尝试不同的浏览器，但你的代码还行！

如果控制台能正常工作，那么我们就可以开始考虑钩子了

【讨论】：