在React中如何逐个将数组值从true改为false以顺序启用按钮？

• 直接修改普通JS变量disabledArray和counter不会触发React组件的重新渲染，按钮的disabled属性自然不会同步更新。你手动修改代码里的初始值能生效，是因为代码变更触发了热重载、组件重新挂载读取了新的初始值，并不是运行时修改变量触发的界面更新。
• 普通JS数组本身支持直接编辑，你的修改逻辑没有语法错误，只是React只会在state更新、props更新、父组件重渲染这三类场景下重新渲染组件，普通变量的变化完全不会被React感知。

用React内置的useState Hook存储禁用数组，按不可变原则更新状态即可触发界面重渲染，参考代码如下：

import { useState } from 'react';
import Button from '@mui/material/Button';

// 你的函数组件内部
const YourComponent = () => {
  // 用state存储禁用数组，初始8个按钮全为禁用状态
  const [disabledArray, setDisabledArray] = useState([true, true, true, true, true, true, true, true]);
  // 这里直接复用你已声明的setButtonPopup方法即可
  const [buttonPopup, setButtonPopup] = useState(false);

  function enableObject() {
    // 拷贝原数组，遵循React状态不可变更新原则
    const newDisabledArray = [...disabledArray];
    // 找到第一个还处于禁用状态的按钮下标
    const nextEnableIndex = newDisabledArray.findIndex(item => item === true);
    // 还有未启用的按钮时才执行更新
    if (nextEnableIndex !== -1) {
      newDisabledArray[nextEnableIndex] = false;
      // 传入新数组更新state，触发组件重渲染
      setDisabledArray(newDisabledArray);
    }
  }

  return (
    <div>
      {/* 触发启用的按钮，原有逻辑无需调整，已修正重复写Button的笔误 */}
      <Button variant="outlined" color="primary" type="submit" onClick={enableObject}>
        Add a new financial object
      </Button>

      {/* 待启用按钮，原有逻辑无需调整，按索引对应数组即可，已修正重复写Button的笔误 */}
      <Button variant="contained" color="primary" type="submit" onClick={() => setButtonPopup(true)} disabled={disabledArray[0]}>
        Object 1
      </Button>
      <Button variant="contained" color="primary" type="submit" onClick={() => setButtonPopup(true)} disabled={disabledArray[1]}>
        Object 2
      </Button>
      {/* 剩余按钮按索引依次类推即可 */}
    </div>
  )
}

• 不需要单独维护counter变量，直接从数组本身判断下一个要启用的位置即可，避免出现计数器和数组状态不同步的问题。
• 更新state时必须生成新的数组再传入set方法，不能直接修改原数组后再传入，否则React会认为state没有变化，不会触发重渲染。

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