javascript - 无法在 react 中使用 setinterval() 附加数组(状态元素)

Question

 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)
}

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

当单独调用 randNumberChange 时，会附加列表，但不会使用 setInterval。

当执行 startTimer 函数时，用 stopTimer 停止，然后再次启动，它会附加第二个项目，然后停止并重复

Answer 1

将 setlist([...list,number])} 更改为 setlist((prevState) => [...prevState, number])。 React 设置状态本质上是异步的。因此，要从状态中获取正确的列表值，您需要从先前的状态中获取值。 Doc

建议:您可以在 useEffect 中启动间隔，而不是在状态中设置计时器。

此外，在 numberChange 函数中，您应该从先前的状态获取list，然后在其中附加新号码。这将确保在添加新数字之前更新 list 值。

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>;
};