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

Question

so I am currently working on an admin control panel that retrieves objects from an API.

The API has two different endpoints, it's either of:

http://localhost:3000/videos
http://localhost:3000/manuals

And the API's both return objects with sets of data such as "id, url, title and thumbnailUrl"

I have a module that's responsible for the card that has the following code:

export interface Manual {
  id?: string | number;
  url: string;
  title: string;
  thumbnail?: string | null;
}

I have a module that's responsible for creating the actual HelpCard components And then the HelpCard components are then loaded up into my HelpList component And then finally, I have my HelpAdmin.view module that brings it all together

The issue is, even when I call a

console.log(this.props.data);

within my HelpList module, I am returned with 8 empty arrays that look like so:

[]
length: 0
__proto__: Array(0)

I am curious as to why my video / manual cards are not actually being displayed onto my list?

Thank you in advance for reading and helping.

Answer 1

You are calling the API in HelpList Component and setting it to state In your HelpAdminView component you have a state of manuals that is an empty array and passing it as a data prop, it would remain empty as you are not updating it,

You can do your API calling in HelpAdminView component and then pass it as a prop to your HelpList component

Hope it helps

Answer 2

The manuals and videos data is in your HelpList component's state, but you are using this.props.data.map which comes empty from your HelpListAdmin using data={this.state.videos}.

So you need replace the related code like this in your HelpList component's render.

              {this.state.manuals.map((card: Manual) => (
                <HelpCard
                  card={card}
                  key={card.id}
                  deleteProduct={this.props.onDelete}
                  editProduct={this.props.onEdit}
                  type={this.props.type}
                />
              ))}

But if you want to manage the state in your HelpAdminView component, you need to make the api calls in this component instead of HelpList component.

And I think you should keep the state in parent (HelpAdminView) and pass the manuals and videos to the HelpList component.

So you need to move this code from HelpList to 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);
      });
  };

Remove the state in HelpList component.

And pass the videos and manuals as props (like you did now) to HelpList component.

      <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>

And use this props in HelpList component (as you did now).

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