如何在反应中将数组的值从真到假一一更改？答案

【问题标题】：How to change values of an array from true to false one by one in react?如何在反应中将数组的值从真到假一一更改？
【发布时间】：2021-11-25 15:13:57
【问题描述】：

我对反应很陌生，我制作了一个带有几个按钮的程序，当单击另一个按钮时，这些按钮需要一个一个地启用。每当我手动将数组值从 true 更改为 false 时，按钮都会显示，但当我运行链接到另一个按钮的函数时不会显示。

数组和enableObject函数：

  var counter = 0;
  var disabledArray = [true, true, true, true, true, true, true, true];
  function enableObject() {
    disabledArray[counter] = false;
    counter++
   }

启用其他按钮的按钮：

<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>

我只是不太明白我是否需要制作另一个数组，或者究竟该怎么做才能使它工作。我的意思是，数组不能完全由程序本身编辑，对吧？我只是没有看到任何其他解决方法。

附：我使用的是 Material-UI，所以不要对按钮等感到困惑。

【问题讨论】：

嗨！可以提供沙盒吗？
你在这里没有使用任何状态，而只是一个普通的布尔数组，如果你想让你的 DOM 得到重新渲染，你需要创建这些布尔数组作为状态，以便 onClick 你改变布尔数组按钮状态和组件将重新渲染

标签： javascript arrays reactjs button

【解决方案1】：

首先，您没有使用 React-States。状态很重要，因为更改它们会强制进行新的渲染。您需要这样做，以便您的按钮状态（启用/禁用）发生变化。如果没有新的渲染，您的按钮将保持禁用状态。

在使用 React 状态时，您应该将它们视为不可变的。因此，如果您更改状态变量中的数组，则需要创建一个新数组。否则 react 不会注意到状态变化，你会再次遇到同样的问题。

这是一个简单的示例解决方案，使用函数式响应您正在尝试做的事情：

function Example() {
    const [counter, setCounter] = useState(0);
    const [disabledArray, setDisabledArray] = useState([true, true, true, true, true, true, true, true]);

    function enableObject() {
        const clone = [...disabledArray];
        clone[counter] = false;
        setDisabledArray(clone);
        setCounter(counter++);
    }
}

【讨论】：

【解决方案2】：

使用状态来保存布尔数组将允许您在更改 dom 时对其进行更新。由于您已经通过数组更新状态，因此无需为计数器执行此操作，因为它只是对状态的调用的两倍。因此它仍然是一个正常的变量。

如果通过类组件完成，我会将它们都置于状态。

const Component = () => {
   const [array, updateArray] = useState([true, true, true, true, true, true, true, true]);

   let counter = 0;

   const enableObject = () => {
       const tmpArray = array
       counter++
       tmpArray[counter] = false
       updateArray(tmpArray)
   }

   return (
      <React.Fragment>
          <Button Button variant="outlined" color="primary" type="submit" onClick={enableObject}>Add a new financial object</Button>
          {array.map((isDisabled) => {
              return (
                 <Button Button variant="contained" color="primary" type="submit" onClick={() => setButtonPopup(true)} disabled={isDisabled}>
                     Object 1
                 </Button>
              )
          })}
      </React.Fragment>
   )
}

【讨论】：