React中直接修改数组对象生效但Hooks更新失效的问题排查

The root issue here is how React tracks state changes. React only triggers re-renders and updates state when it detects a new reference for objects or arrays. If your setValid function is either:

1. Mutating the existing rule object without creating a copy, or
2. Managing a local state for the rule that's not linked to the parent ruleList state array

React won't pick up the change, even if you call setRuleList later. Direct mutation (like rule.valid = !!value) might seem to work temporarily, but it's a React anti-pattern—it bypasses state management and leads to stale state or unexpected behavior down the line.

To properly update the valid field in your ruleList state, you need to create a new array with a copied, updated rule object. Here's a step-by-step implementation:

1. Create a Parent Update Function #

In your component where ruleList is managed, define a function that updates the state correctly:

const updateRuleValid = (ruleId, value) => {
  setRuleList(prevRules => 
    prevRules.map(rule => 
      rule.id === ruleId 
        ? { ...rule, valid: !!value } // Copy rule and update valid
        : rule // Keep other rules unchanged
    )
  );
};

This uses the functional form of setState to ensure you're working with the latest state, and creates a new array with the modified rule (no mutation here).

2. Pass the Update Function to Child Components #

When rendering your list items, pass the updateRuleValid function along with the rule's ID:

{ruleList.map(rule => (
  <RuleItem 
    key={rule.id} 
    rule={rule} 
    onValidChange={(value) => updateRuleValid(rule.id, value)} 
  />
))}

3. Use the Update Function in the Child #

Inside your child component (like RuleItem), call the passed function instead of a local setValid:

const handleValidation = (value) => {
  props.onValidChange(value);
};

• Avoid direct state mutation: Always create copies of objects/arrays when updating state. This is non-negotiable for predictable React behavior.
• Use functional state updates: When modifying state based on previous state (like array updates), use the prevState => newState form to prevent race conditions with stale state.
• Centralize array state management: If multiple components need to modify items in an array state, handle the update logic in the parent component and pass down update functions—don't manage disconnected local state in children.

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