import PersonalInfo from './PersonalInfo.js'
    import { useState } from 'react';
    
    function App() {
      const myPersonalInfo = ['books', 'music', 'code']; 
      const [state, changeState] = useState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
    
      useEffect(() => {
         setInterval(() => {
            changeState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
         }, 2000);
      }, [])
    
      return (
        <div className="App">
          <PersonalInfo title={state} />
        </div>
      );
    }
    
    export default App;

使用useEffect挂钩

使用React使用效果
具有空依赖项的useEffect仅在第一次渲染时运行
clear interval组件卸载

import PersonalInfo from './PersonalInfo.js'
import React, { useState, useEffect } from 'react';

function App() {
  const myPersonalInfo = ['books', 'music', 'code']; 
  const [state, changeState] = useState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);

  useEffect(() => {
    const intervalId = setInterval(() => {
      changeState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
    }, 2000);
    
    return () => clearInterval(intervalId)
  }, [])

  return (
    <div className="App">
      <PersonalInfo title={state} />
    </div>
  );
}

export default App;

使用useEffect并将state设置为依赖项。

useEffect(() => {
  setInterval(() => {
    changeState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
  }, 2000);
}}, [state])

您可能希望使用useEffect和一个空的dependencies数组，以确保设置间隔的代码只在挂载时运行一次，否则您将在内存中为每个状态更改创建一个新的间隔，并且您还希望在卸载时清除该间隔。
另外，你可以使用一个函数来更新状态，否则，你将在内存中注册一个设置的间隔，该间隔将使用相同的值（第一个随机值）不断更新状态。状态更新器函数确保你在evrytime中使用一个新值来水合间隔。

import PersonalInfo from './PersonalInfo.js'
import { useState } from 'react';

function App() {
  const myPersonalInfo = ['books', 'music', 'code']; 
  const [state, changeState] = useState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);

  
  
  useEffect(()=>{
   const id = setInterval(() => {
       changeState(prev => myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
    }, 2000);
    
    // clear the interval before the component gets unmounted
    return ()=>clearInterval(id);
  
  },[])

  return (
    <div className="App">
      <PersonalInfo title={state} />
    </div>
  );
}

export default App;