组件未随数组元素更新状态问题咨询（附卡片渲染代码）

Hey there! Let's figure out why your card set isn't updating when you switch buttons. I've spotted a few key issues in your code and common pitfalls that might be causing this—let's break them down step by step:

1. Fix the Props Passing Bug in Your Map Render #

First off, there's a clear mistake in how you're passing props to CardProduct inside your map loop. Look at your code:

props[props.clickedindex].Products.map((Products, i)=> 
  <CardProduct 
    {...props[props.clickedindex].Products} 
    key={i} 
    index={i} 
    arrkey={Object.keys(Products)} 
  /> 
)

You're looping over individual product objects (named Products here), but you're spreading the entire products array instead of the single product from the loop. That means every CardProduct is getting the same array data instead of unique product details—no wonder switching indexes doesn't change anything!

Fix it by spreading the current loop item instead:

props[props.clickedindex].Products.map((product, i)=> 
  <CardProduct 
    {...product}  // Spread the individual product object
    key={i} 
    index={i} 
    arrkey={Object.keys(product)} 
  /> 
)

I also renamed the loop variable to product (singular) to avoid confusion with the array name Products—small change, but makes your code way easier to read.

2. Make Sure clickedindex is a Proper React State #

If clickedindex is just a regular variable (not managed with React's useState or class component this.state), React won't detect when it changes, so your component won't re-render with the new card set.

For Function Components: #

import { useState } from 'react';

const YourComponent = (props) => {
  const [clickedindex, setClickedindex] = useState(0); // Set your initial index here

  // Handle button clicks to update the index
  const handleButtonClick = (newIndex) => {
    setClickedindex(newIndex);
  };

  // Rest of your component code...
};

For Class Components: #

class YourComponent extends React.Component {
  state = {
    clickedindex: 0
  };

  handleButtonClick = (newIndex) => {
    this.setState({ clickedindex: newIndex });
  };

  // Rest of your component code...
}

If clickedindex is coming from parent component props, double-check that the parent is updating its own state correctly to pass the new index down.

3. Stop Using Array Indexes as Keys #

Using i (the loop index) as your key is a common anti-pattern. If your products array ever changes order, adds, or removes items, React will reuse the wrong components and cause stale state issues. Instead, use a unique identifier from each product—like an id field:

props[props.clickedindex].Products.map((product)=> 
  <CardProduct 
    {...product} 
    key={product.id}  // Use the product's unique ID instead of index
    index={i} 
    arrkey={Object.keys(product)} 
  /> 
)

If your products don't have an id, use a combination of unique fields (e.g., product.name + product.price) to ensure the key is unique for each item.

4. Ensure CardProduct Responds to Props Changes #

If your CardProduct component isn't updating when props change, it might be preventing re-renders:

• For class components: Check if you have a shouldComponentUpdate method that's blocking updates when props change.
• For function components: Wrap it with React.memo to make it a pure component, which will re-render only when props change:

  const CardProduct = React.memo((props) => {
    // Your CardProduct component code here
  });
  

5. Verify Your Products Array Has a New Reference (If Needed) #

If you're modifying the original products array directly (e.g., pushing new items without creating a copy), React might not detect the change because the array reference stays the same. Always create a new array when updating products:

// ❌ Wrong: Modifies the original array (reference doesn't change)
props[props.clickedindex].Products.push(newProduct);

// ✅ Correct: Creates a new array with the updated items
const updatedProducts = [...props[props.clickedindex].Products, newProduct];
// Then update the state holding this array (if it's in state)

Quick Recap of Steps to Fix #

1. Correct the props spread in your map loop to pass individual product data.
2. Confirm clickedindex is managed as React state and updated properly.
3. Replace index keys with unique product identifiers.
4. Ensure CardProduct re-renders when props change.
5. Use new array references when updating product data.

Follow these steps, and your card set should update correctly when you switch buttons!

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