Your update functions were mutating the existing objects instead of creating new ones:
javascript// ❌ Before (broken - mutates existing objects)const updateStat = (index, field, value) => { const newStats = [...stats]; // Shallow copy - objects are same references! newStats[index][field] = value; // Mutating the original object setAttributes({ stats: newStats });};
When you spread an array with
[...stats]
, it creates a shallow copy. The array is new, but the objects inside still point to the same memory locations. When you mutate
newStats[index][field]
, you’re actually mutating the original object. React/WordPress doesn’t detect this change because the object reference is the same.
The Fix
Create new objects when updating:
javascript// ✅ After (fixed - creates new objects)const updateStat = (index, field, value) => { const newStats = stats.map((stat, i) => { if (i === index) { return { ...stat, [field]: value }; // New object with updated field } return stat; }); setAttributes({ stats: newStats });};
This creates a new object for the item being updated using
{ ...stat, [field]: value }
, which properly triggers WordPress to save the changes.
Refresh the editor and your stats/features edits should now save correctly! 🎉
WP开发教程 WordPress导师在线教程