应用按钮需要被禁用，但无法禁用 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]);