Laravel+ReactJS CRUD问题：可插入数据但前端无法显示列表

Hey there! Let's dig into why your React app isn't showing those 4 products from your MySQL database. I'll break down common issues and fixes based on your code:

1. First: Verify Your Laravel API is Returning Data #

Before checking React, confirm your backend is sending the right data:

• Open your browser and navigate directly to http://your-app-url/api/products (replace with your actual localhost/domain URL). You should see a JSON array of 4 product objects.
  • If you don't see the data:
    • Check your routes/api.php file: Make sure you have a route for fetching products, like Route::resource('products', 'ProductController'); (this maps the index method to the GET /api/products endpoint).
    • Double-check your Product model: Ensure the $fillable property includes title and body (even though you can insert data, this ensures the data is correctly retrieved):

      class Product extends Model
      {
          protected $fillable = ['title', 'body'];
      }
      

    • Check for CORS issues: If your frontend runs on a different port/domain than Laravel, you need to enable CORS. For Laravel 7, install the barryvdh/laravel-cors package, add its middleware to your API routes, and configure it to allow requests from your frontend origin.

2. Fix React State Initialization #

In your DisplayProduct.js component, you initialize products as an empty string (''), but your tabRow() method only renders if products is an array. This means the first render won't show anything, and even after the API call, there might be edge cases where the state isn't handled correctly.

Update the initial state to an empty array:

constructor(props) {
  super(props);
  this.state = {value: '', products: []}; // Changed from '' to []
}

This ensures tabRow() will always work with an array (even empty) instead of a string.

3. Validate Data Structure in React #

After fixing the state, check if the API response matches what your components expect:

• In DisplayProduct.js, modify your API call to log the exact structure of the response:

  axios.get(MyGlobleSetting.url + '/api/products')
  .then(response => {
    console.log('API Response:', response.data); // Log the full response data
    this.setState({ products: response.data });
  })
  

• Make sure each object in the array has id, title, and body properties (match what your TableRow component is trying to render: this.props.obj.id, this.props.obj.title, this.props.obj.body).

4. Check React Router Setup #

Ensure your /display-item route is correctly rendering the DisplayProduct component:

• In your app.js, the nested route under Master looks correct, but double-check that when you navigate to /display-item, the DisplayProduct component mounts and runs the componentDidMount lifecycle method (you can add a console.log('DisplayProduct mounted') in componentDidMount to confirm).

Quick Recap of Steps #

1. Confirm /api/products returns a valid JSON array of products.
2. Fix the initial state of products in DisplayProduct.js to be an empty array.
3. Verify the API response data matches the properties your React components are using.
4. Ensure the React Router route is correctly loading the DisplayProduct component.

Once you work through these steps, your products should show up in the frontend table!

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