ReactJS API数据获取异常求助：页面空白，求代码问题排查

Hey there! Let's break down what's going wrong with your code and get that blog list showing up properly. Here are the key issues and fixes:

1. Invalid JSX Structure in Render #

React requires that your component's render method returns a single root element. Right now, your map is outputting separate <h3> and <p> elements for each blog post without wrapping them in a container. This will throw a syntax error under the hood, preventing your content from rendering.

2. Incorrect Loading State Check #

Your initial bloglist state is an empty array []. In JavaScript, an empty array is still a "truthy" value, so !bloglist will always be false—meaning your loading message never shows up. Instead, check if the array has no items with bloglist.length === 0.

3. Using class Instead of className #

In React, we can't use the class attribute (it's a reserved keyword in JavaScript). Replace all instances of class with className to apply CSS classes correctly.

4. Missing key Prop for List Items #

When rendering lists with map, React needs a unique key prop on each list item to efficiently update the DOM. Use the blog post's id (since it's unique) for this.

Fixed Code #

Here's your updated Base.js with all these fixes applied:

import React, { Component } from 'react';

export default class App extends Component {
  state = { bloglist: [] };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await fetch("http://localhost:8000/api/blog_list");
      const jsonResponse = await response.json();
      this.setState({ bloglist: jsonResponse });
    } catch (error) {
      console.error("Failed to fetch blog data:", error);
    }
  };

  render() {
    const { bloglist } = this.state;

    // Show loading message if no data yet
    if (bloglist.length === 0) {
      return (
        <div>
          <h1>Loading...</h1>
        </div>
      );
    }

    // Wrap all blog posts in a single container, add keys, and use className
    return (
      <div className="blog-container">
        {bloglist.map((blog) => (
          <div key={blog.id} className="blog-post">
            <h3 className="mb-2">
              {/* Use the actual blog URL from your API instead of a static link */}
              <a href={blog.url}>{blog.title}</a>
            </h3>
            <p className="mb-4">{blog.description || "No description available"}</p>
          </div>
        ))}
      </div>
    );
  }
}

Bonus Note: CORS Potential Issue #

If you still see a blank page after fixing the code, check your browser's console for CORS errors. Since your React app is likely running on localhost:3000 and your API is on localhost:8000, you'll need to configure your backend to allow cross-origin requests (for example, using Django CORS Headers if you're using Django for the API).

内容的提问来源于stack exchange，提问作者satyajit