数据未从 API [ReactJs] 加载到列表中

Question

所以我目前正在开发一个从 API 检索对象的管理控制面板。

API 有两个不同的端点，它是：

http://localhost:3000/videos

http://localhost:3000/manuals

API 都返回带有数据集的对象，例如“id、url、title 和thumbnailUrl”

我有一个模块负责具有以下代码的卡：

export interface Manual {

  id?: string | number;

  url: string;

  title: string;

  thumbnail?: string | null;

}

我有一个模块负责创建实际的 HelpCard 组件 然后将 HelpCard 组件加载到我的 HelpList 组件中 最后，我有我的 HelpAdmin.view 模块，将它们组合在一起

问题是，即使我打电话给

console.log(this.props.data);

在我的 HelpList 模块中，我返回 8 个空数组，如下所示：

[]

length: 0

__proto__: Array(0)

我很好奇为什么我的视频/手册卡实际上没有显示在我的列表中？

提前感谢您的阅读和帮助。

Answer 1

手册和视频数据处于您的 HelpList 组件的状态，但您正在使用 this.props.data.map，它使用 data={this.state.videos} 从您的 HelpListAdmin 中变为空。所以你需要在你的 HelpList 组件的渲染中替换这样的相关代码。&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.manuals.map((card: Manual) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <HelpCard&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; card={card}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={card.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deleteProduct={this.props.onDelete}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; editProduct={this.props.onEdit}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type={this.props.type}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}但是如果你想在你的 HelpAdminView 组件中管理状态，你需要在这个组件而不是 HelpList 组件中进行 api 调用。而且我认为您应该将状态保留在父级 (HelpAdminView) 中，并将手册和视频传递给 HelpList 组件。因此，您需要将此代码从 HelpList 移至 HelpAdminView。&nbsp; async componentDidMount() {&nbsp; &nbsp; const res = await axios.get(this.state.url);&nbsp; &nbsp; this.setState({ card: res.data });&nbsp; &nbsp; this.loadAdminHelpCard("videos");&nbsp; &nbsp; this.loadAdminHelpCard("manuals");&nbsp; &nbsp; //console.log(res.data);&nbsp; }&nbsp; loadAdminHelpCard = (type: "videos" | "manuals"): void => {&nbsp; &nbsp; const baseApiUrl = `http://localhost:3000`;&nbsp; &nbsp; const url = `${baseApiUrl}/${type}`;&nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; .get(url)&nbsp; &nbsp; &nbsp; .then((res) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ [type]: res.data } as any);&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .catch(function(error) {&nbsp; &nbsp; &nbsp; &nbsp; // handle error&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; });&nbsp; };移除 HelpList 组件中的状态。并将视频和手册作为道具（就像您现在所做的那样）传递给 HelpList 组件。&nbsp; &nbsp; &nbsp; <div className="listDisplay">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style={{ textAlign: "center" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Videos</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <HelpList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={this.state.videos}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="videos"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onEdit={this.editProduct}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onDelete={this.deleteProduct}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style={{ textAlign: "center" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Manuals</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <HelpList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={this.state.manuals}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="manuals"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onEdit={this.editProduct}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onDelete={this.deleteProduct}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>并在 HelpList 组件中使用这个道具（就像你现在所做的那样）。export default class HelpList extends Component<Props, State> {&nbsp; static props: any;&nbsp; render() {&nbsp; &nbsp; console.log(this.props.data);&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.card ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.props.data.map((card: Manual) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <HelpCard&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; card={card}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={card.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deleteProduct={this.props.onDelete}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; editProduct={this.props.onEdit}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type={this.props.type}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br></br>Loading Cards...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </React.Fragment>&nbsp; &nbsp; );&nbsp; }}

Answer 2

您正在 HelpList 组件中调用 API 并将其设置为 state 在您的 HelpAdminView 组件中，您有一个手册状态，它是一个空数组并将其作为数据道具传递，因为您没有更新它，它将保持为空，您可以在 HelpAdminView 组件中调用 API，然后将其作为道具传递给您的 HelpList 组件希望能帮助到你