如何在React中循环切换数组对象内的State状态？

核心思路是遍历数组中的每个对象，暂存当前三个状态的值，再按顺序重新赋值，确保每个对象独立完成状态轮转，不会互相干扰。

实现步骤（以JavaScript为例） #

• 定义状态轮转函数：遍历people数组，对每个对象单独操作
  • 先暂存当前的State_1、State_2、State_3值（避免直接覆盖导致数据丢失）
  • 按规则重新赋值：State_1取原State_2的值，State_2取原State_3的值，State_3取原State_1的值，形成循环
• 给按钮绑定点击事件，触发上述函数

完整代码示例 #

HTML部分 #

<button id="toggleBtn">切换状态</button>
<pre id="result"></pre> <!-- 用于实时展示状态变化 -->

JavaScript部分 #

// 初始数据
const data = {
  "people": [
    {
      "name": "Alice",
      "State_1": "Apple",
      "State_2": "Cherry",
      "State_3": "Dates"
    },
    {
      "name": "Bob",
      "State_1": "Banana",
      "State_2": "Plumb",
      "State_3": "Clementine"
    },
    {
      "name": "Eve",
      "State_1": "Grapes",
      "State_2": "Apricots",
      "State_3": "Grapefruit"
    }
  ]
};

// 展示初始状态
document.getElementById('result').textContent = JSON.stringify(data, null, 2);

// 状态轮转核心函数
function rotateStates() {
  data.people.forEach(person => {
    // 暂存当前三个状态的原始值
    const originalState1 = person.State_1;
    const originalState2 = person.State_2;
    const originalState3 = person.State_3;
    
    // 按规则完成一次轮转赋值
    person.State_1 = originalState2;
    person.State_2 = originalState3;
    person.State_3 = originalState1;
  });
  
  // 更新页面展示的状态数据
  document.getElementById('result').textContent = JSON.stringify(data, null, 2);
}

// 绑定按钮点击事件
document.getElementById('toggleBtn').addEventListener('click', rotateStates);

效果说明 #

• 第一次点击：每个对象的State_1变为原State_2值，State_2变为原State_3值，State_3变为原State_1值
• 后续点击：重复轮转逻辑，比如Alice的状态会按Apple→Cherry→Dates→Cherry→Dates→Apple→Dates→Apple→Cherry的顺序循环切换

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