我從 API 獲取資料如下：
[
{
"GroupA1": [
{
"code": 10,
"name": "item1"
},
{
"code": 11,
"name": "item2"
},
{
"code": 12,
"name": "item3"
},
{
"code": 13,
"name": "item4"
}
],
"GroupA2": [
{
"code": 21,
"name": "item5"
},
{
"code": 20,
"name": "item6"
},
{
"code": 22,
"name": "item7"
},
{
"code": 23,
"name": "item8"
}
]
},
{
"GroupB": [
{
"code": 70,
"name": "item9"
}
]
},
{
"GroupC": [
{
"code": 50,
"name": "item10"
},
{
"code": 51,
"name": "item11"
},
{
"code": 52,
"name": "item12"
}
]
},
{
"GroupD": [
{
"code": 40,
"name": "item13"
}
]
}
]
我正在使用 Redux。
在我的 React 專案中獲取資料并使用for回圈跟蹤資料后console.log()，資料在瀏覽器中顯示如下：
{GroupA: Array(4)}
GroupA: Array(4)
0: {code: value, name: "value"}
1: {code: value, name: "value"}
2: {code: value, name: "value"}
3: {code: value, name: "value"}
{GroupB: Array(1)}
GroupB: Array(1)
0: {code: value, name: "value"}
{GroupC: Array(3)}
GroupC: Array(3)
0: {code: value, name: "value"}
1: {code: value, name: "value"}
2: {code: value, name: "value"}
{GroupD: Array(1)}
GroupD: Array(1)
0: {code: value, name: "value"}
我想將資料放在功能組件和<select>具有 <optgroup>標簽和<option>標簽的標簽中。
我想將GroupA、GroupB、GroupC和GroupD等資料放入<optgroup>標簽中，并將名稱和代碼放入<option>標簽中。
我的組件如下：
const FunctionalComponent = () => {
const [mystate , setMyState] = useState([
{
title: null,
permission: [{ name: null, code: null }],
},
]);
const datas = useSelector((state) => state.datas);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getDatas());
for (var stuff in datas) {
console.log( datas[stuff] );
setMyState((t) => [...t, {title: [key]}]); //???
value.map((v) =>
setMyState((val) => [...val, { permission: [{ name: v.name }] ,[{ code: v.code }] }]) //???
);
}
}
return(
<div>
<select>
<optgroup> //show title
<option></option> //show name , code
</optgroup>
</select>
</div>
)
}
export default FunctionalComponent
我無法顯示資料，并且它們在選擇標簽中未被識別為單獨的物件。
useEffect當我在回圈內部和內部獲取資料時，如何在狀態內部傳遞資料for，以便key放置標題。并且 value包含代碼和名稱的也被放置而不是代碼和狀態的名稱？
如何在 JSX 中訪問狀態的標題、名稱和代碼？
因為我用的方式行不通，資料沒有轉入狀態。
感謝那些幫助我的人！
uj5u.com熱心網友回復：
檢查此沙箱
<select>
{data.flatMap(obj => Object.entries(obj)).map(objArr => {
return (
<optgroup label={objArr[0]}>
{objArr[1].map(ob => <option value={ob.code}>{ob.name}</option>)}
</optgroup>
)
})}
</select>
它的作用是將flatMap所有物件展平為 1 個陣列，然后您可以輕松地迭代該陣列。
每個條目將是一個新陣列。第一個元素將是“屬性”，optgroup第二個元素將填充option標簽。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/472972.html
標籤：javascript 数组 反应 反应钩子
上一篇：如何在React中基于包含組件的陣列動態創建組件樹？
下一篇：for回圈執行一次后退出