我正在嘗試根據 API 回應呈現按鈕組件。
按鈕回應結構
"buttons": {
"yesButton": {
"buttonText": "Yes",
},
"noButton": {
"buttonText": "No"
}
}
componentContent.buttons正在回傳兩個帶有按鈕內容的物件，并且資料正在控制臺中列印。
但在視圖中我沒有看到任何按鈕 html。
我在這里做錯了什么？
const renderComponentButtons = () => {
if (componentContent?.buttons) {
console.log(componentContent?.buttons);
Object.keys(componentContent.buttons).forEach((key) => {
console.log(key);
return (
<ButtonAction
aria-label={componentContent.buttons[key].buttonText}
onClick={() => {
props.toPrev();
}}
>
{componentContent.buttons[key].buttonText}
</ButtonAction>
);
});
}
};
return (
<div className="row">
<div className="col-md-4">
{renderComponentButtons()}
</div>
</div>
)
uj5u.com熱心網友回復：
- 將 forEach 更改為映射并將回傳添加到開頭
渲染組件按鈕（）
const renderComponentButtons = () => {
if (componentContent?.buttons) {
console.log(componentContent?.buttons);
return(Object.keys(componentContent.buttons).map((key, index) => (
<button
key={index}
aria-label={componentContent.buttons[key].buttonText}
onClick={() => {
// props.toPrev();
}}
>
{componentContent.buttons[key].buttonText}
</button>)
))
}
};
訪問
uj5u.com熱心網友回復：
ForEach 回傳undefined所以使用 map 而不是 forEach 像這樣
Object.keys(componentContent.buttons).map((key) => { // change this line
console.log(key);
return (
<ButtonAction
aria-label={componentContent.buttons[key].buttonText}
onClick={() => {
props.toPrev();
}}
>
{componentContent.buttons[key].buttonText}
</ButtonAction>
);
});
使用 map 您可以通過用括號替換大括號來避免回傳陳述句，如下所示
Object.keys(componentContent.buttons).map((key) => (
<ButtonAction
aria-label={componentContent.buttons[key].buttonText}
onClick={() => {
props.toPrev()
}}
>
{componentContent.buttons[key].buttonText}
</ButtonAction>
)
uj5u.com熱心網友回復：
您的代碼幾乎是正確的，但您應該使用map代替forEach并從renderComponentButtons.
forEach用于回圈遍歷陣列中的所有值并且不期望回傳結果。map不同的是，它用于獲取回傳的結果。
在您的情況下，您的按鈕組件需要從回圈中回傳
const renderComponentButtons = () => {
if (componentContent?.buttons) {
console.log(componentContent?.buttons);
return Object.keys(componentContent.buttons).map((key) => {
console.log(key);
return (
<ButtonAction
aria-label={componentContent.buttons[key].buttonText}
onClick={() => {
props.toPrev();
}}
key={key}
>
{componentContent.buttons[key].buttonText}
</ButtonAction>
);
});
}
return null; //no buttons in your data
};
return (
<div className="row">
<div className="col-md-4"> {renderComponentButtons()} </div>
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/468924.html
標籤：反应