javascript - 数据未从 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 组件的渲染中替换这样的相关代码。

              {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 组件中的状态。

并将视频和手册作为 Prop (就像您现在所做的那样)传递给 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 组件中使用此 Prop (就像您现在所做的那样)。

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>
    );
  }
}