将状态集合中的第一个元素移动到 React 中的最后一个位置答案

【问题标题】：Moving first element in state collection to the last position in React将状态集合中的第一个元素移动到 React 中的最后一个位置
【发布时间】：2023-02-09 21:59:41
【问题描述】：

谁能解释幕后发生的事情并为以下问题提供解决方案？我在 collection 数组中聚合了一组状态对象。在执行特定操作后（此处为按钮onClick），我想将其第一个元素的位置移动到同一集合中最后一个元素之后。这两行，即加法（扩展运算符）和删除（过滤器）分别工作得很好，但结合起来结果不是我期望的那样。

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [collection, setCollection] = useState(["one", "two", "three"]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <p>{collection.map((element) => `${element} `)}</p>
        </p>
        <button
          onClick={() => {
            const newElement = collection[0];
            setCollection((old) => old.filter((v) => v !== newElement));
            setCollection([...collection, newElement]);
          }}
        >
          Click me
        </button>
      </header>
    </div>
  );
}

export default App;

【问题讨论】：

设置状态是异步的，您的第二次状态更新正在使用 collection 的旧值进行，覆盖原始更新。您可以将它们组合成一个集合，以避免这种情况。

标签： reactjs

【解决方案1】：

出现问题是因为对setCollection 的第二次调用使用了过时的集合数组。在 React 中，setState 是异步的，这意味着状态更新可能不会立即发生。因此，当调用第二个 setCollection 时，它使用的是原始集合数组，而不是第一次调用中更新的集合数组。

要解决这个问题，可以使用setState 的函数形式，它接收先前的状态作为参数，并返回新的状态。这样，您可以确保您使用的是上次调用 setState 后的更新状态。

function App() {
  const [collection, setCollection] = useState(["one", "two", "three"]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <p>{collection.map((element) => `${element} `)}</p>
        </p>
        <button
          onClick={() => {
            setCollection((prevCollection) => {
              const newElement = prevCollection[0];
              const newCollection = prevCollection.filter((v) => v !== newElement);
              return [...newCollection, newElement];
            });
          }}
        >
          Click me
        </button>
      </header>
    </div>
  );
}

像那样的东西。让我知道它是否好！

【讨论】：