useState 未正确更新数组答案

【问题标题】：useState not updating array correctlyuseState 未正确更新数组
【发布时间】：2021-09-01 18:34:36
【问题描述】：

我正在研究轮播滑块。我在其中使用 2 个数组。包含图像和 id 的对象的 1 个数组“slideData”和另一个数组“slideNum”包含要迭代的索引。 slideArr 是我们将映射的最终数组，它包含来自“slideData”的图像并根据“slideNum”索引进行映射。当我使用 useState 更新 'slideArr' 数组时，不是在更新，但是当我直接使用 array.splice 进行更新时，它的工作状态。

const SecondGrid = () => {

  const len = SlideData.length - 1;
  const [first, setFirst] = useState(1);
  const [second, setSecond] = useState(2);
  const [third, setThird] = useState(3);
  let [slideNum, setSlideNum] = useState([0, 1, 2]);
  const [slideArr, setSlideArr] = useState([
    {
      id: 0,
      imgsrc: "./assets/c1.jpg",
      data: "Here is Light salty chineese touch",
    },
    {
      id: 1,
      imgsrc: "./assets/c2.jpg",
      data: "Try our special breakfast",
    },
    {
      id: 2,
      imgsrc: "./assets/c3.jpg",
      data: "Taste the italian likalu food",
    },
  ]);

  const next = () => {
    setFirst(first >= len ? 0 : (prevState) => prevState + 1);
    setSecond(second >= len ? 0 : (prevState) => prevState + 1);
    setThird(third >= len ? 0 : (prevState) => prevState + 1);

   // const arr = [...slideArr];

  // storing next index image into all three Cards
    slideNum.forEach((val, key1) => {
      SlideData.forEach((value, key) => {
        if (key === val) {
          slideArr.splice(key1, 1, value);
          
          // this is not working
          
          // arr[key1] = value;
          // console.log(arr);
          // setSlideArr(arr);
          
          //console.log(slideArr);
        }
      });
    });
  };

  useEffect(() => {
    next();
  }, []);

  useEffect(() => {
    const interval = setTimeout(() => {
    //updaing slideNum number,in which 'first' contain id of image which will be on 0 index, its updating through useState.
    
      setSlideNum([first, second, third]);
      next();
    }, 3000);
    return () => clearTimeout(interval);
  }, [first, second, third]);


  return (
    <Container>
      <div className="row">
        <div className="d-flex flex-wrap justify-content-around ">
          {slideArr.map((val) => (
            <SlideCard val={val} />
          ))}
        </div>
      </div>
    </Container>
  );
};

【问题讨论】：

标签： javascript arrays reactjs use-state

【解决方案1】：

有一些独立代码来演示问题会很有帮助，但只是查看您说不起作用的注释掉的位，您可以使用 map() 更改数组中的值：

setSlideArr(slideArr.map(item => (item.id === 1 ? value : item)))

这是一个演示 CodeSandbox。

此外，如果您想查看更改后的状态值，您的 console.log(slideArr) 应该在 useEffect 挂钩中。

【讨论】：

【解决方案2】：

据我所知，发生的情况是你不能拼接slideArr，因为它是useState，你最好做的是：

if (key === val) {
      var arr = slideArr;
      arr.splice(key1, 1, value);
      setSlideArr(arr);
}

【讨论】：

这仍然会改变状态。 arr = slideArr 不会复制数组，而只是将 arr 指向与 slideArr 相同的引用。