reactjs 如何在React with useState中按字母显示文本？

b09cbbtk 于 2023-01-12 发布在 React

关注(0)|答案(2)|浏览(98)

我想创建一个文本，其中的另一个字母被添加到最后一个字母，就像在一台旧电脑中一样，但字母之间不断替换，而不是添加到另一个字母中：

const App = () => {
  const [text, setText] = React.useState(``);
  React.useEffect(() => {
    [`x`,`y`].forEach((letter, index) => {
      setTimeout(()=> {

         // old: setText(text => text + letter) 
         setText(text => text + letter) // new: printing each letter twice

      }, 500 * index)
    })
  }, [])
  return (text)
}

ReactDOM.createRoot(document.getElementById(`root`))
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

有什么办法可以补救呢？
谢谢!

reactjs

来源：https://stackoverflow.com/questions/75083880/how-to-display-text-by-letters-in-react-with-usestate

2条答案

按热度按时间

k7fdbhmy1#

这是因为StrictMode。使用useEffect时不要忘记清除函数。在这种情况下，您需要清除超时，否则它们将在组件重新渲染时堆积起来，并在卸载后仍然存在：

React.useEffect(() => {
  let ids = [];
  
  ['x', 'y'].forEach((letter, index) => {
    const id = setTimeout(() => {
      setText(text => text + letter);
    }, 500 * index);
    
    ids.push(id);
  });
  
  // cleanup !
  return () => { ids.forEach((id) => clearTimeout(id)); };
 }, [])

赞(0）回复(0）举报 2023-01-12

46scxncf2#

你的大错误是你没有处理state的前一个值，你在每次渲染中都更新了state的值，而不是state的前一个值。我相信你的错误可以通过在setText（）中使用回调来解决：

setTimeout(()=> {
      setText((prev)=>prev+letter)
    }, 500 * index)

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs 如何在React with useState中按字母显示文本？

2条答案

相关问题

热门标签

最新问答