因此，我正在嘗試根據陣列物件中每個電子郵件資料的 isBadData 切換圖示。但我似乎無法找出如何將其保存回狀態，以便它可以更新 LeadProfileComponent 中的圖示影像。
這是它的樣子：
checkIcon = isBadData: false
crossIcon = isBadData: true
這是我的代碼：
// ModalComponent.js
const [leadProfile, setLeadProfile] = useState([
{
id: 'd114877b-074b-4aa2-a3f0-3b9446885336',
firstName: 'wqe',
lastName: 'wqe',
name: 'wqe wqe',
email: [
{
type: 'personal',
address: '[email protected]',
valid_since: '2010-05-09',
isBadData: true,
},
{
type: 'personal',
address: '[email protected]',
valid_since: '2017-03-09',
isBadData: true,
},
{
type: 'personal',
address: '[email protected]',
valid_since: '2009-01-12',
isBadData: true,
},
],
},
]);
<LeadProfileComponent leadProfile={leadProfile} setLeadProfile={setLeadProfile} />
// LeadProfileComponent.js
const LeadProfileComponent = (props) => {
const handleChildEmail = (email, index) => {
props.setLeadProfile((prev: any) => {
const value = { ...prev[0].email[index] };
console.log('inside value');
console.log(value);
value.isBadData = !value.isBadData;
console.log(value);
// return prev;
return [value];
});
console.log('props.leadProfile');
console.log(props.leadProfile);
};
return (
<>
{
props.leadProfile.map((lead, index) => (
return(
<>
{lead.email.map(() => {
return (
<button
id="btnCheck"
onClick={() => {
handleChildEmail(email, index);
}}
>
<img
src={
email.isBadData !== true
? checkIcon
: closeIcon
}
/>
</button>
)
})}
</>
)
}
</>
);
}
以下是您在 handChildEmail 函式中控制臺登錄時的樣子：
如您所見，我能夠更改 email[0] 的內部布林值，但我無法將其保存回leadProfile 狀態，因為我在解構部分中缺少部分
uj5u.com熱心網友回復：
將您的組件分解成更小的部分，并單獨管理每封電子郵件
- LeadProfileEmailComponent.js
const LeadProfileEmailComponent = ({ initialEmailData, ...props }) => {
const [emailData, setEmailData] = useState(initialEmailData);
return (
<button
id="btnCheck"
onClick={() => {
setEmailData({
...emailData,
isBadData: !emailData.isBadData
});
}}
>
<img
src={
emailData.isBadData !== true
? checkIcon
: closeIcon
}
/>
</button>
)
}
在 LeadProfileComponent 中更改它：
{lead.email.map((email) => {
return (
<LeadProfileEmailComponent initialEmailData={email} />
)
})}
缺點是，父組件的狀態不會更新。然而，這是標準的設計模式實踐，您不應為此依賴父組件資料。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/483579.html