手冊和視頻數據處于您的 HelpList 組件的狀態，但您正在使用 this.props.data.map，它使用 data={this.state.videos} 從您的 HelpListAdmin 中變為空。
所以你需要在你的 HelpList 組件的渲染中替換這樣的相關代碼。
{this.state.manuals.map((card: Manual) => (
<HelpCard
card={card}
key={card.id}
deleteProduct={this.props.onDelete}
editProduct={this.props.onEdit}
type={this.props.type}
/>
))}
但是如果你想在你的 HelpAdminView 組件中管理狀態，你需要在這個組件而不是 HelpList 組件中進行 api 調用。
而且我認為您應該將狀態保留在父級 (HelpAdminView) 中，并將手冊和視頻傳遞給 HelpList 組件。
因此，您需要將此代碼從 HelpList 移至 HelpAdminView。
async componentDidMount() {
const res = await axios.get(this.state.url);
this.setState({ card: res.data });
this.loadAdminHelpCard("videos");
this.loadAdminHelpCard("manuals");
//console.log(res.data);
}
loadAdminHelpCard = (type: "videos" | "manuals"): void => {
const baseApiUrl = `http://localhost:3000`;
const url = `${baseApiUrl}/${type}`;
axios
.get(url)
.then((res) => {
this.setState({ [type]: res.data } as any);
})
.catch(function(error) {
// handle error
console.log(error);
});
};
移除 HelpList 組件中的狀態。
并將視頻和手冊作為道具（就像您現在所做的那樣）傳遞給 HelpList 組件。
<div className="listDisplay">
<div>
<div style={{ textAlign: "center" }}>
<h2>Videos</h2>
</div>
<HelpList
data={this.state.videos}
type="videos"
onEdit={this.editProduct}
onDelete={this.deleteProduct}
/>
</div>
<div>
<div style={{ textAlign: "center" }}>
<h2>Manuals</h2>
</div>
<HelpList
data={this.state.manuals}
type="manuals"
onEdit={this.editProduct}
onDelete={this.deleteProduct}
/>
</div>
</div>
并在 HelpList 組件中使用這個道具（就像你現在所做的那樣）。
export default class HelpList extends Component<Props, State> {
static props: any;
render() {
console.log(this.props.data);
return (
<React.Fragment>
{this.state.card ? (
<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>
) : (
<h1>
<br></br>Loading Cards...
</h1>
)}
</React.Fragment>
);
}
}
