在ReactJS中将传入数组项从一个变量转移到另一个变量

Question

下面的例子有点做作，但它很好地说明了我的问题。点击，'a'得到传递了几个项目，我想确保最后一个被自动转移到'b'，而不是'a'作为同一点击处理程序的一部分。函数运行后，我希望看到呈现如下状态:a = ['Adam'， 'Brett']和b = ["Donald"， "Eric"， "Fred"， "Cody"]

创建一个副本来使用下面的pop方法不能工作，因为'a'的新状态还没有反映出来。欢迎任何提示。

import React, { useState } from "react";
export default function Test() {
const [a, SetA] = useState([]);
const [b, SetB] = useState(["Donald", "Eric", "Fred"]);
function click() {
SetA((prev) => [...prev, "Adam", "Brett", "Cody"]);
const aCopy = [...a];
const mover = aCopy.pop();
SetA((prev) => [...prev, aCopy]);
SetB((prev) => [...prev, mover]);
}
return (
<>
<div>Group A: {a}</div>
<div>Group B: {b}</div>
<button onClick={click}>Click</button>
</>
);
}

Answer 1

来自React的文档:

setState()不会立即改变它。状态，但会创建待定状态转换。访问。调用后的状态方法可能返回现有值。没有保证调用setState和调用may的同步操作批量处理以提高性能。

TLDR;你不能在setState之后访问state。

你可以做的是用你想要的值创建两个新的数组，然后setState，像这样:

function click() {
const newA = [...a, "Adam", "Brett", "Cody"];
const newB = newA.slice(0, newA.length - 1);
SetA(newA);
SetB(newB);
}