React服务端渲染State仅3条数据且含重复数据排查求助

Hey there, let's break down why you're only seeing 3 items (with one duplicate) rendered from your server-side state. Here are the most likely culprits and how to check them:

1. The Issue Starts at the Server/API Level #

First things first—check if your server-side API is actually returning 3 items with a duplicate. SSR relies on the server fetching data first, so if the API itself sends back incomplete or duplicated data, your component will render exactly that.

• Test the API directly: Call your category data endpoint (e.g., /api/categories/7 if using the default categoryId) with the same parameters your SSR logic uses. Look at the response—does it have 3 items, including a duplicate? If yes, fix the API or data source first.

2. getDerivedStateFromProps Might Be Causing Wrong Data Requests #

Your getDerivedStateFromProps sets categoryId and categoryIndex based on navigation.state.params, falling back to defaults (7 and 0) if params don't exist. But during SSR, navigation.state.params might not be available as expected, leading you to fetch the wrong category's data.

• Log the values in getDerivedStateFromProps (both on server and client):

  static getDerivedStateFromProps(nextProps) {
    const { params } = nextProps.navigation.state || {};
    const getCategoryId = params ? params.categoryId : 7;
    const getCategoryIndex = params ? params.categoryIndex : 0;
    console.log('SSR/Client categoryId:', getCategoryId); // Add this log
    return { categoryId: getCategoryId, categoryIndex: getCategoryIndex };
  }
  

  If the server logs 7 but you meant to fetch a different category, your SSR routing might not be passing params correctly.

3. Data Deduplication Logic Isn't Working (Or Missing) #

You have a storeExistId state array for deduplication, but if your data handling logic in onLoadCategory isn't properly filtering duplicates, you'll end up with repeated items. Plus, during SSR, the initial storeExistId is empty, so any duplicates in the API response will slip through.

• Fix and verify your data processing:
  Let's assume your onLoadCategory looks something like this (fill in the missing axios code):

  onLoadCategory = () => {
    axios.get(`/api/categories/${this.state.categoryId}`)
      .then(res => {
        const rawData = res.data;
        // First, deduplicate the new data itself
        const uniqueNewData = Array.from(new Map(rawData.map(item => [item.id, item])).values());
        // Then, filter out items already in storeExistId
        const filteredData = uniqueNewData.filter(item => !this.state.storeExistId.includes(item.id));
        
        this.setState(prevState => ({
          loadCategoryTab: {
            data: [...prevState.loadCategoryTab.data, ...filteredData]
          },
          storeExistId: [...prevState.storeExistId, ...filteredData.map(item => item.id)]
        }));
      })
      .catch(err => console.error('Load category error:', err));
  }
  

  If you were just appending raw data without deduplicating first, duplicates from the API will end up in your state.

4. SSR Hydration Mismatch #

Sometimes the server-rendered HTML doesn't match the client's hydrated state, causing the client to "stick" with the server's incomplete data.

• Check the initial state injected by SSR: Look for window.__INITIAL_STATE__ (or whatever your SSR setup uses) in the rendered HTML. Does it contain only 3 items with a duplicate? If yes, your server-side data fetching logic is the problem, not the client component.

Start with the API check first—it's the most common root cause. Then work your way through the component's data handling and SSR state injection.

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