在 React 中使用 setInterval() 将第一项移动到数组的最后一个位置答案

【问题标题】：Move first item to last position of an array with setInterval() in React在 React 中使用 setInterval() 将第一项移动到数组的最后一个位置
【发布时间】：2021-02-10 01:57:34
【问题描述】：

我正在尝试使用 setInterval 函数将数组的第一项移动到 React 中数组的最后一个位置：

const [cardOrder, setCardOrder] = useState([card1, card2, card3, card4]);
setInterval(() => {
    setCardOrder(cards.push(cards.shift()))
}, 3000);

第一次总是有效，但第二次我得到了

TypeError: cardsOrder.shift is not a function

我怎样才能达到这个结果？所有帮助表示赞赏。谢谢。

【问题讨论】：

你说“使用setTimout函数”然后使用setInterval，这与“setTimout”或setTimeout不一样。然后您显示不使用变量 cardsOrder 的代码，但说您收到关于 cardsOrder.shift 不是函数的错误。您的问题文本和代码之间的不匹配使您难以理解问题...请显示使用的实际代码以及该代码产生的错误。
抱歉，我匆忙提出这个问题。 setInterval 就是我的意思。
您可以随时edit 将您的问题做到最好。

标签： javascript arrays reactjs setinterval use-state

【解决方案1】：

您的代码很少有问题，例如cardsOrder 未定义。此外，您还缺少一些重要的东西，例如状态管理和生命周期，也就是钩子。也不确定为什么需要 i 变量。无论如何，这是一个可能的替代解决方案：

const { useEffect, useState } = React;

const App = () => {
  const [arr, setFn] = useState(['first', 'second', 'third', 'fourth']);
  
  useEffect(() => {
     const i = setInterval(() => {
        setFn(([first, ...rest]) => [...rest, first]);
     }, 1000);
     
     return () => clearInterval(i);
  }, []);
  
  return arr.join('\n');
}

ReactDOM.render(<App />, document.getElementById("root"));

body {
   white-space: pre;
}

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：

【解决方案2】：

您可以将交换实现为数组原型

Array.prototype.swap = function (x, y) {
  var z = this[x];
  this[x] = this[y];
  this[y] = z;
  return this;
}

然后使用它

const array= [{a:'a',b:'b'},{c:'c',d:'d'}];
const newArray = array.swap(0,1)

newArray 如果你在找什么。使用 insted .swap(0,3)

【讨论】：

“您可以将交换实现为数组原型”但不要，除非您对应用程序中使用的所有代码及其依赖项拥有绝对控制权。见Why is extending native objects a bad practice?
所以他可以实现为一个简单的函数。

【解决方案3】：

这是因为，[].push() 返回数组的长度。因此，当您执行 setOrder(cards.push(cards.shift(i))) 时，卡将更改为 (Array) 为 Number（数组的长度），下次您调用它时，它将变为 (number)1.shift，这不起作用。这就是您收到该错误的原因。

将您的代码更改为：

 setInterval(() => {
   cards.push(cards.shift())
   setOrder([...cards]) // this will work.

   // OR

   const card = cards.shift()
   setOrder([...cards, card])
 }, 3000)

【讨论】：