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

Question

所以我目前正在开发一个从 API 检索对象的管理控制面板。API 有两个不同的端点，它是：http://localhost:3000/videoshttp://localhost:3000/manualsAPI 都返回带有数据集的对象，例如“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 组件中的状态。

并将视频和手册作为道具（就像您现在所做的那样）传递给 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>

    );

  }

}

Answer 2

您正在 HelpList 组件中调用 API 并将其设置为 state 在您的 HelpAdminView 组件中，您有一个手册状态，它是一个空数组并将其作为数据道具传递，因为您没有更新它，它将保持为空，

您可以在 HelpAdminView 组件中调用 API，然后将其作为道具传递给您的 HelpList 组件

希望能帮助到你