我創建了一個筆記應用程式。在首頁它有類別和注釋。您可以單擊類別并獲取該類別下的所有注釋。我剛剛添加了一個按鈕，可讓您洗掉類別及其所有注釋，然后導航回首頁。它看起來像這樣：
按鈕：
<IonRow>
<IonButton onClick={deletecat} >
Delete Category
</IonButton>
</IonRow>
這是deletecat功能：
const deletecat = () => {
const trashcategory = ({category}) => {
try {
fetch(`https://fakeurl.com/delcat/${category}/`, {
method: "DELETE",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
})
} catch (error) {
console.log("error time!", error);
return false;
}
};
trashcategory({category})
router.push('/notes')
}
當我單擊我的按鈕時，我收到此錯誤：
NotFoundError: Node.removeChild: The node to be removed is not a child of this node
這個問題實際上是在 SO 之前解決的（React Error: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node），但他們的具體解決方案是針對 jquery。但我認為這個概念是一樣的：
當您：
1. Render something using React 2. Then, you manipulate DOM rendered by React with external script 3. Now on the next render cycle(re-render), React doesn't find the DOM node it rendered previously as its already modified/removed by external script
How do I resolve this? Is there any way I can re-render the DOM in a way where it doesn't try and look for what was rendered previously? How else might I get around this?
edit: This is the front page:
useEffect(() => {
getcategories({username})
getnotes({username})
console.log("USEEFFECTTIME")
},[]);
const getcategories = ({ username }) => {
try {
fetch(`https://fakeurl.com/getcategories`, {
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({username}),
})
.then(res => res.json())
.then(data => {
setCategorydata(data);
setLoading(false);
})
} catch (error) {
console.log("error time!", error);
return false;
}
};
console.log('before get categories')
const getnotes = async ({ username }) => {
try {
//await fetch(`/getnotes`, {
await fetch(`https://fakeurl.com/getnotes`, {
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({username}),
})
.then(res => res.json())
.then(data2 => {
setNotedata(data2);
setLoading2(false)
})
} catch (error) {
console.log("error time!", error);
return false;
}
};
const categories = categorydata.categories
const notes = notedata.notes
<IonSlides id="slider" options={{ slidesPerView: "auto", zoom: true, grabCursor: true }} className={ `${ styles.categorySlider } ion-padding-bottom` }>
{ categories.map((category, index) => {
const noteCount = notes.filter(n => n.note_category === category.id).length;
return (
<IonSlide key={ `categorySlide_${ index }`}>
<IonCol className="ion-text-left">
<IonCard routerLink={`/categorypage/${category.id}`}>
<IonCardHeader className="ion-no-padding" >
<div className={ styles.slideCount }>
<h6>{ noteCount } { noteCount === 1 ? "note" : "notes" } </h6>
</div>
<div className={ styles.slideHeader }>
<h4 style={{color:"black"}}>{ category.category }</h4>
</div>
</IonCardHeader>
<IonCardContent>
<div className={ styles.categoryColor } style={{ borderBottom: `2px solid ${ category.color }` }}></div>
</IonCardContent>
</IonCard>
</IonCol>
</IonSlide>
);
})}
</IonSlides>
<IonGrid className={ styles.bottomContainer }>
<IonRow>
<IonCol size="12" className="ion-padding-start">
<IonCardSubtitle className={ styles.heading }>
Recent Notes
</IonCardSubtitle>
</IonCol>
</IonRow>
<div className={ styles.recentNotes }>
{ notes.slice(0).reverse().map((note, index) => {
return (
<IonRow key={ `note_${ index }` } className="animate__animated animate__faster" id={ `noteRow_${ note.id }` }>
<IonCol size="12">
<Link to={`/Update/${note.id}`}>
<h2>{note.note_name}</h2>
</Link>
</IonCol>
</IonRow>
);
})}
</div>
</IonGrid>
uj5u.com熱心網友回復：
根據您上面的評論，為了使更改同時反映在首頁和組件頁面上，您從父組件級別的 API 呼叫資料，然后將資料和 setData 作為 props 向下傳遞到組件頁面。
如果首頁和組件頁面是一個router下的兄弟，那么你可以拉取router組件中的資料并作為props共享或者實作useContext hook來共享資料。
更改筆記內容和洗掉類別等更新應該發生在前端，然后通過異步獲取請求更新到后端。
問題來自 API 更新與同步卸載與router.push方法呼叫之間的異步延遲。通過依賴當地的州資料，您應該擺脫您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/441167.html
標籤：javascript reactjs ionic-framework
上一篇：使用Ionic/React/Typescript傳遞道具時出錯-React.FC中的道具錯誤<'wrongpropshere'>