Javascript 无法在react中使用setinterval（）追加数组（状态元素）

列表始终仅呈现一个项，而不附加它

当单独调用

randNumberChange

时，列表会被追加，但不会附加

setInterval

---

当执行

startTimer

功能时，使用

stopTimer

停止，然后再次启动，它会附加第二项，然后停止，并重复执行

您需要使用

useffect

挂钩：

 const [timer,setTimer] = useState()
 const [number, setNumber] = useState()
 const [list, setlist] = useState([])

const numberChange = (number)=>{
    setNumber(number)
    if (!(list.find(item=>item===number))){
        setlist([...list,number])}
  }

  const randomNumber=()=> 1+Math.floor(Math.random()*90)

  const randNumberChange=()=>{
    let randNumber = randomNumber()
    if (list.find(item=>item===randNumber))
      randNumberChange()
      else
    numberChange(randNumber)
  }

  const startTimer = () => {
   setTimer(setInterval(()=>{
        randNumberChange()
   }, 5000))
}

const stopTimer=()=>{
    clearInterval(timer)
}

将

setlist（[…list，number]）}

更改为

setlist（（prevState）=>[…prevState，number]）

。反应集状态本质上是异步的。因此，要从该状态获取正确的列表值，需要从以前的状态获取值

建议：您可以在

useffect

中启动间隔，而不是将计时器设置为状态

同样在

numberChange

函数中，您应该从以前的状态中获取

列表

，然后在该状态中追加新的编号。这将确保在添加新编号之前更新

列表

值

useEffect(() => {
  // You don't need timer state, we'll clear this later
  const interval = setInterval(() => {
    randNumberChange()
  },5000)
  return () => { // clear up
   clearInterval(interval)
  }
},[])

import React，{Component，useState}来自“React”；
从“react dom”导入{render}；
从“/Hello”导入Hello；
导入“/style.css”；
常数测试=（）=>{
const[number，setNumber]=useState（null）；
const[list，setlist]=useState（[]）；
常数numberChange=number=>{
setNumber（数字）；
如果（！list.find（item=>item==number））{
setlist（（prevState）=>[…prevState，number]）；//不直接使用列表值，而是从上一个状态获取它
}
};
const randomNumber=（）=>1+Math.floor（Math.random（）*90）；
常数randNumberChange=（）=>{
console.log（“此处”）；
设randNumber=randomNumber（）；
if（list.find（item=>item==randNumber））randNumberChange（）；
其他编号更改（随机编号）；
};
常数startTimer=（）=>{
返回setInterval（（）=>{randNumberChange（）；}，5000）；
}
常量停止计时器=（计时器）=>{
清除间隔（计时器）
}
React.useffect（（）=>{
常数计时器=起始计时器（）；
return（）=>stopTimer（计时器）；
}, []);
控制台日志（列表）；
返回{number}；
};

谢谢你，这很有效。我直接改变了状态。谢谢你的帮助

import React, { Component, useState } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
const Test = () => {
  const [number, setNumber] = useState(null);
  const [list, setlist] = useState([]); 

  const numberChange = number => {
    setNumber(number);
    if (!list.find(item => item === number)) {
      setlist((prevState) => [...prevState, number]);// instead of directly using list value, get it from previous state
    }
  };

  const randomNumber = () => 1 + Math.floor(Math.random() * 90);

  const randNumberChange = () => {
    console.log("here");
    let randNumber = randomNumber();
    if (list.find(item => item === randNumber)) randNumberChange();
    else numberChange(randNumber);
  };

  const startTimer = () => {
     return setInterval(() => { randNumberChange(); }, 5000);
  }

  const stopTimer = (timer) => {
     clearInterval(timer)
  }

  React.useEffect(() => {
    const timer = startTimer();
    return ()=> stopTimer(timer);
  }, []);

  console.log(list);
  return <div>{number}</div>;
};