我試圖用從物件陣列中獲取的值填充物件，但該物件僅從陣列中的最后一個物件獲取值。
這是一個簡化的代碼示例
https://codesandbox.io/s/crazy-nobel-c7xdb?file=/src/App.js
import "./styles.css";
import React, { useEffect, useState } from "react";
export default function App() {
const [fieldsValues, setFieldsValues] = useState({});
const items = [{ value: "a" }, { value: "b" }, { value: "c" }];
useEffect(() => {
items.map((item, index) => {
return setFieldsValues({
...fieldsValues,
[index]: item.value
});
});
}, []);
return (
<div className="App">
<h2> {` fieldsValues = ${JSON.stringify(fieldsValues)}`} </h2>
</div>
);
}
我希望 fieldsValues 回傳這個：
{
0: "a",
1: "b",
2: "c"
}
我現在得到的是：
fieldsValues = {"2":"c"}
uj5u.com熱心網友回復：
你通過這樣做來修復它
useEffect(() => {
items.map((item, index) => {
return setFieldsValues((prev) => ({
...prev,
[index]: item.value,
}));
});
}, []);
更好的方法是
useEffect(() => {
const data = items.reduce(
(prev, item, index) => ({ ...prev, [index]: item.value }),
{}
);
setFieldsValues((prev) => ({ ...prev, ...data }));
}, []);
uj5u.com熱心網友回復：
要創建物件，將陣列映射為[index, value]對，并使用以下命令轉換為物件Object.fromEntries()：
const items = [{ value: "a" }, { value: "b" }, { value: "c" }];
const result = Object.fromEntries(items.map(({ value }, index) => [index, value]))
console.log(result)但是，您使用陣列然后需要設定狀態的方式在反應背景關系中實際上沒有意義。
如果陣列是一個 prop，你應該將它添加useEffect為一個依賴項：
const arrToObj = items => Object.fromEntries(items.map(({ value }, index) => [index, value]))
export default function App({ items }) {
const [fieldsValues, setFieldsValues] = useState({});
useEffect(() => {
setState(() => arrToObj(items))
}, [items]);
...
如果是靜態陣列，則將其設定為 的初始值setState：
const arrToObj = items => Object.fromEntries(items.map(({ value }, index) => [index, value]))
const items = [{ value: "a" }, { value: "b" }, { value: "c" }];
export default function App({ items }) {
const [fieldsValues, setFieldsValues] = useState(() => arrToObj(items));
...
uj5u.com熱心網友回復：
順便說一句，它會是這樣的
useEffect(() => {
let test={}
items.map((item, index) => {
return setFieldsValues((prev)=>{
return {
...prev,
[index]: item.value
}
});
});
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/395765.html
標籤：javascript 数组 反应 目的