我有這個問題，代碼在這里：
https://codesandbox.io/s/youthful-wozniak-pqp48d?file=/src/App.js
最終物件需要有 2 個鍵，一個帶有 Bloco，另一個帶有 Apto，但只有 apto 顯示，我不知道為什么會發生這種情況，有人可以幫我嗎？=]
uj5u.com熱心網友回復：
setUserObjValues(prev=>{return{
...prev,
[name]: { value, complement, type, id, error: value ? false : true }
}});
uj5u.com熱心網友回復：
當您在映射中執行 setState 時，將保留原始值以供串列中的下一個值使用。這意味著您在第 30 行所做的點差是空的。
相反，您應該將串列映射到最終的一組值和 setState，而不是為串列中的每個專案。
偽代碼：
useEffect(() => {
if (data.complements) {
const newUserObjValues = data.complements.map((item) => transformItem(item);
setUserObjValues(newUserObjValues)
}
}, []);
其中 transformItem 是一個類似于 userCompValues 的函式，它將回傳專案而不是嘗試 setState。
uj5u.com熱心網友回復：
我將 userCompValues 函式更改為只回傳一個物件，并在 useEffect 中獲取 map 函式的回傳值。嘗試這個：
import "./styles.css";
import { useEffect, useState } from "react";
import ReactJson from "react-json-view";
const data = {
complements: [
{
id: "1",
complement: "abc",
type: "Bloco",
value: "10"
},
{
id: "2",
complement: "dnd",
type: "Apto",
value: "25"
}
]
};
export default function App() {
const [userObjValues, setUserObjValues] = useState({});
const userCompValues = (target, complement, type, id) => {
const { value, name } = target;
return {
[name]: { value, complement, type, id, error: value ? false : true }
};
};
useEffect(() => {
if (data.complements) {
const result = data.complements.map((item) => {
return userCompValues(
{ value: item.value, name: item.type },
item.complement,
item.type,
item.id
);
});
setUserObjValues(result);
}
}, []);
return (
<div className="App">
<div>
<ReactJson
style={{ padding: 10, display: "flex", justifyContent: "flex-start" }}
displayObjectSize
theme="bright:inverted"
displayDataTypes={false}
indentWidth={4}
src={userObjValues}
/>
</div>
</div>
);
}uj5u.com熱心網友回復：
你可以通過使用這個 reduce 來優化你的狀態變化：
export default function App() {
const [userObjValues, setUserObjValues] = useState({});
useEffect(() => {
let obj = { ...userObjValues };
if (data.complements) {
const newState = data.complements.reduce(
(acc, { value, type, id, complement }) => {
return {
...acc,
[type]: {
value,
type,
complement,
id,
error: value ? false : true
}
};
},
obj
);
setUserObjValues(newState);
}
}, []);
return (
<div className="App">
<div>
<ReactJson
style={{ padding: 10, display: "flex", justifyContent: "flex-start" }}
displayObjectSize
theme="bright:inverted"
displayDataTypes={false}
indentWidth={4}
src={userObjValues}
/>
</div>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/482957.html
標籤：javascript 反应 使用效果
上一篇：如何重新啟用鏈接懸停效果