应用按钮需要被禁用，但无法禁用 Toggler2 按钮的 onclick

Question

加载时，需要禁用 Apply 按钮并单击 Toggler1 按钮，我想更改状态，即其中一个选项卡标志将为 true，因此应启用 apply 按钮，一旦标志在任何选项卡中为 true 并且何时任何选项卡中的标志都是假的，应用按钮应该被禁用，当我们点击 Toggler2 按钮时，我正在设置标志条件为 flase 的状态，无法禁用应用按钮。我正在检查标志的条件，基于此我正在设置状态，即 setEdit(flase)，因为它在循环中，所以无法正确设置状态点击 Toggeler1 按钮，应用按钮将被启用，点击切换器 2，应用按钮需要被禁用但无法禁用应用按钮，即使数据中的标志为 false import React from "react";import "./styles.css";export default function App() {  let items = [    {      tab: "tab1",      info: [        { mnemonic: "first", flag: false },        { mnemonic: "second", flag: false }      ]    },    {      tab: "tab2",      info: [        { mnemonic: "first", flag: false },        { mnemonic: "second", flag: false }      ]    },    {      tab: "tab3",      info: [        { mnemonic: "first", flag: false },        { mnemonic: "second", flag: false }      ]    }  ];  let item2 = [    {      tab: "tab1",      info: [        { mnemonic: "first", flag: true },        { mnemonic: "second", flag: false }      ]    },    {      tab: "tab2",      info: [        { mnemonic: "first", flag: false },        { mnemonic: "second", flag: false }      ]    },    {      tab: "tab3",      info: [        { mnemonic: "first", flag: false },        { mnemonic: "second", flag: false }      ]    }  ];  const [edit, setEdit] = React.useState(true);  const [data, setData] = React.useState(items);  const changeFlag = () => {    setData(item2);  };  const changeFlag1 = () => {    setData(items);  };  React.useEffect(() => {    data.forEach((_eachItem) => {      const isChanged = _eachItem.info.find((_each) => _each.flag);      if (isChanged) {        setEdit(false);      }    });  }, [data]);  console.log(data);  return (    <div className="App">      <button onClick={changeFlag}> Toggler1</button>      <button onClick={changeFlag1}> Toggler2</button>      <button disabled={edit}> Apply</button>    </div>  );}

Answer 1

您正在寻找数组中的某些项目data，以使数组中的某些元素info具有真实flag值。这可以通过Array.prototype.some()来完成。

const isChanged = data.some((item) => item.info.some((el) => el.flag));

您的效果需要检查是否满足此条件，并edit使用相反的条件更新状态以禁用 Apply 按钮。

React.useEffect(() => {

  const isChanged = data.some((item) => item.info.some((el) => el.flag));

  setEdit(!isChanged);

}, [data]);

编辑 apply-button-need-to-be-disabled-but-unable-to-disable-onclick-of-toggler2-butto

或者，您可以使用 Array.prototype.every 并检查所有数据项是否都具有错误信息标志并返回并为编辑/禁用模式设置肯定确认。

React.useEffect(() => {

  const isChanged = data.every((item) => item.info.every(({ flag }) => !flag));

  setEdit(isChanged);

}, [data]);