反应：我有以下代码，我使用 setInterval 不时更改文本值，当我切换页面并返回时，文本变化非常快

Question

我假设当组件被多次渲染时，setinterval 发生了一些问题，但我该如何解决这个问题。底部代码是我正在使用的商店，我没有 understand.someone 说我必须在组件外部使用 useeffect 但它给我错误。不管怎样，我是新来的，所以我需要帮助，大家 appriciated.Thanks.

      import SmallLogo from '../img/logo.svg';
      import StarskyText from '../img/starskyproject.svg';
      import './Statement.css'
      import { BrowserRouter as Router,Routes,Route,Link } from "react-router-dom";
      import { getElementError } from '@testing-library/react';
      import react, { useRef , useState,  useEffect } from 'react';
      import { useDispatch, useSelector } from "react-redux";
      import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
      import { store } from "./appReducer";

      function TempText(props) {
      return <span className="yellow changetext"> {props.body} </span>;
      }

      function doUpdate(callback) {
      setInterval(callback, 1300);
      }

      export default function Statement(){

      const dispatch = useDispatch();
      const textOptions = ["NFT", "CRYPTO", "METAVERSE", "WEB3"];
      const tempText = useSelector((state) => state.tempText);

    function change() {
  let state = store.getState();
  const index = state.index;
  console.log(index);
  console.log(textOptions[index]);
  dispatch({
    type: "updatetext",
    payload: textOptions[index]
  });
  let newIndex = index + 1 >= textOptions.length ? 0 : index + 1;
  dispatch({
    type: "updateindex",
    payload: newIndex
  });
}

useEffect(() => {
  doUpdate(change);
}, []);


var [dropdownOpen , Setdrop] = useState(false);



return(
      
    <div>
          <Link to="/">
          <img className='star-fixed' alt='starlogo' src={SmallLogo}></img>
          </Link>
        <img className='starsky-fixed' alt='starsky-project' src={StarskyText}></img>
        <div className='text-content'>
            <span className='statement-text'>WEB3 IS NOT ONLY THE FUTURE.
                        IT’S THE ONLY FUTURE!</span>
            <span className='starsk-link'>starsk.pro</span>
        </div>
        <div className='text-content-bottom'>
           <span className='statement-text-bottom'>CREATE YOUR NEXT  
           <TempText body={tempText} />
           <span className='flex'>  PROJECT WITH
            <Dropdown className="hover-drop-out" onMouseOver={() => Setdrop(dropdownOpen=true) } onMouseLeave={() => Setdrop(dropdownOpen=false)} isOpen={dropdownOpen} toggle={() => Setdrop(dropdownOpen = !dropdownOpen) }>
            <DropdownToggle className='hover-drop'>  STRSK.PRO </DropdownToggle>
            <DropdownMenu>  </DropdownMenu>
            </Dropdown> </span>
            </span>
        </div>
    </div>

)

}

     import { createStore } from "redux";
     const initialState = {
     tempText: "NFT",
     index: 1
     };

     const reducer = (state = initialState, action) => {
     switch (action.type) {
     case "updatetext":
     return {
      ...state,
     tempText: action.payload
      };
     case "updateindex":
     return {
    ...state,
      index: action.payload
    };
     default:
     return state;
      }
      };

      export const store = createStore(reducer);

Answer 1

您可以在组件卸载时调用 clearTimeout 函数并引用您的计时器来清除计时器。

useEffect(() => {
  const timer = setInterval(change, 1300);
  // in order to clear your timeout
  return () => clearTimeout(timer);
}, [])

反应：我有以下代码，我使用 setInterval 不时更改文本值，当我切换页面并返回时，文本变化非常快

React : i have following code, i am using setInterval to change text value time to time ,when i switch pages and come back text is changing reallyfast

html

setinterval

reactjs

react-redux

react-hooks