当从redux存储中获取数据时，使用usestate挂钩与数组

Question

我要把我的家人从下面这样的商店从最顶级的带走

const family:Family = useSelector((state:any) => state.family.family);

这是我的家庭对象

address: "No 48, Katukurunda"
enabled: true
id: 1
members: Array(2)
0: {id: "5", first_name: "Rohan", last_name: "Perera"}
1: {id: "4", first_name: "Sohani", last_name: "Perera"}
length: 2
__proto__: Array(0)
monthly_contribution: 50
name: "Mendis Family

你可以清楚地看到会员有两个项目

所以我有一个UseState项目来计算像这样的行号

const [rowNumber, setRowNumber] = useState<number[]>([]);

我对setRowNumber有一个有用的效果，就像这个

useEffect(() => {
if (family) {
family.members.forEach(() => {
setRowNumber([...rowNumber, rowNumber.length + 1]);
});
}
}, [family, setRowNumber]);

只是为了检查页面加载时有多少行可用，我添加了这个代码

useEffect(() => {
console.log(rowNumber);
}, [rowNumber]);

但上面的控制台日志显示了这个[1]，一个只有一个项的数组。第二位成员怎么了？

我使用rowNumber.map()来显示该Family的可用成员。但当页面加载时，它只显示一个根据以下useEffect正确的文本框

useEffect(() => {
console.log(rowNumber);
}, [rowNumber]);

我在这里做错了什么？为什么rowNumber只有一个项目？

family.members显然有2项

我刚刚意识到rowNumber阵列中只包含最后一个值

Answer 1

可能与setRowNumber是异步的事实有关。你试过使用本地数组吗？类似于：

useEffect(() => {
if (family) {
let result = [];
family.members.forEach(() => {
result.push(result.length + 1);
});
setRowNumber(result);
}
}, [family, setRowNumber]);

Answer 2

在React中调用setState()是异步的，这意味着setState不会立即更新状态，所以在上一次迭代中，它会在您的状态中添加0 + 1。试着这样做：

useEffect(() => {
if (family) {
const rows = [];
family.members.forEach((value, i) => {
rows.push(i + 1);
});
setRowNumber(rows);
}
}, [family, setRowNumber]);

Answer 3

useEffect中的内容对于在useState中存储数组是错误的。

使用以下代码，

useEffect(() => {
if (family) {
family.members.map((item) => {
setRowNumber(()=> { 
console.log(item); // verify result with this console log
return [...rowNumber, rowNumber.length + 1]
});
});
}
}, [family, setRowNumber]);