[英]How to update list without refreshing the page
我有一個 API,它為我提供了具有以下屬性的對象:id、title、url、thumbnailUrl。
我有一個模塊負責具有以下代碼的卡:
export interface Manual {
id?: string | number;
url: string;
title: string;
thumbnail?: string | null;
}
我有一個模塊負責創建實際的 HelpCard 組件,它的代碼如下:
interface Props {
card: Manual;
deleteProduct: Function;
editProduct: Function;
type: "videos" | "manuals";
}
interface State {
editedCard: Manual;
imageLoading?: boolean;
tooManyRequests?: boolean;
}
export default class HelpCard extends Component<Props, State> {
state = {
editedCard: {
id: -1,
url: "",
title: "",
thumbnail: ""
},
imageLoading: true,
tooManyRequests: false
};
componentDidMount() {}
onEditClick = (card: Manual): void => {
this.setState({ editedCard: card });
};
updateEditCard = (event: React.FormEvent<HTMLInputElement>, key: "url" | "title" | "thumbnail"): void => {
const value = event.currentTarget.value;
this.setState((prevState: State) => {
return { editedCard: { ...prevState.editedCard, [key]: value } };
});
};
render() {
const { card } = this.props;
const { editedCard } = this.state;
return (
<React.Fragment>
<div className="card">
<div className="card-img">
{this.state.imageLoading ? <img src={placeholder} style={{ width: "100%", height: "100%" }}></img> : null}
<img
className="cardImage"
style={
this.state.tooManyRequests
? { display: "none" }
: this.state.imageLoading
? { display: "null" }
: { display: "block" }
}
onLoad={() => this.setState({ imageLoading: false })}
onError={() => this.setState({ tooManyRequests: true })}
src={card.thumbnail ? card.thumbnail : placeholder}
/>
</div>
<div className="card-body">
<div style={{ textAlign: "center" }}>
<span className="card-title">{card.title}</span>
<hr></hr>
</div>
<div className="card-buttons">
<div className="group">
<Modal
trigger={
<Button
onClick={() => this.onEditClick(card)}
style={{ width: "90px" }}
icon="mode_edit"
className="btn blue-outline"
href="#!">
Edit
</Button>
}>
<form
onSubmit={(e) => e.preventDefault()}
id="videoCardEdit"
style={{ width: "auto", height: "auto" }}>
<div>
<div>
<label>Title:</label>
<input
className="input"
style={{ width: "100%" }}
name="videoCardTitle"
onChange={(e: React.FormEvent<HTMLInputElement>) => this.updateEditCard(e, "title")}
value={editedCard.title}></input>
</div>
<div>
<label>URL:</label>
<input
className="input"
style={{ width: "100%" }}
name="videoCardURL"
onChange={(e: React.FormEvent<HTMLInputElement>) => this.updateEditCard(e, "url")}
value={editedCard.url}></input>
</div>
<div>
<label>Thumbnail URL:</label>
<input
className="input"
style={{ width: "100%" }}
name="videoCardThumbnail"
onChange={(e: React.FormEvent<HTMLInputElement>) => this.updateEditCard(e, "thumbnail")}
value={editedCard.thumbnail}></input>
</div>
<br></br>
</div>
<Button
type="submit"
className="btn green-outline"
icon="check"
length="fullwidth"
style={{
float: "left"
}}
onClick={() =>
this.props.editProduct(
card.id,
editedCard.title,
editedCard.url,
editedCard.thumbnail,
this.props.type
)
}>
confirm
</Button>
<br></br>
</form>
</Modal>
<Button
icon="delete"
style={{ width: "90px" }}
onClick={() => this.props.deleteProduct(card.id, this.props.type)}
className="btn red-outline">
Delete
</Button>
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
}
然后卡片會顯示在 HelpList 組件上,代碼如下:
export default class HelpList extends Component<Props, State> {
state = {};
async componentDidMount() {}
render() {
console.log(this.props.data);
return (
<div className="row">
{this.props.data.map((card: Manual) => (
<HelpCard
card={card}
key={card.id}
deleteProduct={this.props.onDelete}
editProduct={this.props.onEdit}
type={this.props.type}
/>
))}
</div>
);
}
}
在加載我的卡片的 HelpAdmin.view.tsx 模塊上顯示的最終列表,並具有所有 API 功能,例如我的創建/刪除/編輯調用。
state和負載function如下:
export class HelpAdminView extends Component<Props, State> {
state = {
title: "",
thumbnail: "",
url: "",
error: null,
isEditProduct: true,
isAddProduct: true,
whichRadioSelected: "video",
videos: [],
manuals: []
};
componentDidMount() {
this.loadAdminHelpCard("videos");
this.loadAdminHelpCard("manuals");
}
loadAdminHelpCard = (type: "videos" | "manuals"): void => {
const url = `${BASE_API_URL}/${type}`;
axios
.get(url)
.then((res) => {
this.setState({ [type]: res.data } as any);
})
.catch(function(error) {
// handle error
console.log(error);
});
};
最后,我的編輯 function 是這樣的:
editProduct = (id: any, title: string, url: string, thumbnail: string, type: "videos" | "manuals") => {
const apiUrl = `${BASE_API_URL}/${type}/${id}`;
axios
.put(apiUrl, {
title: title,
url: url,
thumbnail: thumbnail
})
.then((response: any) => {
// ? UPDATE the list with new card information here
})
.catch(function(error) {
console.log(error);
});
};
當用戶點擊“編輯”時,卡片從道具中復制並放入 state。 現在只編輯卡的state。 (this.state.editedCard)當用戶單擊提交時,editedCard 的詳細信息將提供給 editProduct(id、標題、縮略圖等...)。 在 HelpAdmin.view.tsx 中,正在調用 API,這將使用新卡詳細信息更改數據庫。
我想弄清楚的是如何在視頻/手冊中更新我們的卡片,以便它反映在 UI 中。 (ON 成功調用 API)
提前感謝您的閱讀和幫助!
當更新操作結束時,您可以獲得當前數據。
.then((response: any) => {
//here get the recent data from your api
// ? UPDATE the list with new card information here
this.loadAdminHelpCard("videos");
this.loadAdminHelpCard("manuals");
})
所以這會更新 state,導致父組件重新渲染,子組件也會重新渲染,所以你的 Card 組件會得到新的數據。
全部編輯產品 function:
editProduct = (id: any, title: string, url: string, thumbnail: string, type: "videos" | "manuals") => {
const apiUrl = `${BASE_API_URL}/${type}/${id}`;
axios
.put(apiUrl, {
title: title,
url: url,
thumbnail: thumbnail
})
.then((response: any) => {
//here get the recent data from your api
// ? UPDATE the list with new card information here
this.loadAdminHelpCard("videos");
this.loadAdminHelpCard("manuals");
})
.catch(function(error) {
console.log(error);
});
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.