按钮 function 在使用外部组件的 React Hooks 中不起作用

Question

我有下一个代码，我从 TitleHeader 导入NextButton和GroupButton ，这些组件是简单的按钮

之后，我声明了一个简单的数组ButtonsArray并用useEffect段中的那些组件填充它，此外，我将 Button function “绑定”到按钮组件。 例子：

 <NextButton function={ShowSearchBar}/>

然后，我的另一个组件TitleHeader接收数组并使用 map function 渲染其中的组件

我的问题是，如果我使用 const 数组ButtonsArray并将组件作为 TitleHeader 中的道具加载，当按下 UI 中的 NextButton 以确认一切正常时，会发生一些奇怪的事情

NextButton 的唯一工作是执行 ShowSearchBar function 必须将 const 从 true 切换为 false ，反之亦然，但它不起作用，

如果我调试程序，当我按下按钮时，程序进入 ShowSearchBar function 但总是允许查找为假

注意：如果我直接在TitleHeader参数中声明数组，一切正常

import React, { useState, useEffect } from "react";

import { TitleHeader, NextButton, GroupButton } from "../Common/TitleHeader";

export const ACATG001 = () => {
  const [allowFind, setAllowFind] = useState(false);
  const [allowGroup, setAllowGroup] = useState(false);
  const [ButtonsArray, setButtonsArray] = useState([]);

  useEffect(() => {
    setButtonsArray([
      <NextButton function={ShowSearchBar} />,
      <GroupButton function={ShowGroupBar} />,
    ]);
  }, []);

  function ShowSearchBar() {
    setAllowFind(!allowFind);
  }

  return (
    <GeneralContainer>
      //doesnt work (using a const type array and filled in UseEffect)
      <TitleHeader
        Title={t("TTER001")}
        BarSize="300px"
        Embedded={false}
        ButtonsArray={ButtonsArray}
      />
      //Works declaring the array and the items inline
      <TitleHeader
        Title={t("TTER001")}
        BarSize="300px"
        Embedded={false}
        ButtonsArray={[
          <NextButton function={ShowSearchBar} />,
          <GroupButton function={ShowGroupBar} />,
        ]}
      />
    </GeneralContainer>
  );
};

第二个JS TitleHeader

import React, { Component } from "react";
import { Button } from "primereact/button";

export class TitleHeader extends Component {
  constructor() {
    super();
  }

  componentDidMount() {}

  render() {
    let TitleDesing;

    TitleDesing = (
      <div className="Buttons-Group">
        {this.props.ButtonsArray.map((component, index) => (
          <React.Fragment key={index}>{component}</React.Fragment>
        ))}
      </div>
    );

    return TitleDesing;
  }
}

export const NextButton = (props) => {
  return (
    <Button
      id="nextButton"
      label="test"
      tooltip="Next"
      className="p-button-rounded p-button-text"
      onClick={props.function}
    >
      <CgChevronRight size="20PX" color=" #d6f1fa" />{" "}
    </Button>
  );
};

Answer 1

如果您对 state 所做的更新仅取决于其当前值，请始终使用调度程序的 function 回调版本，这将保证您不会使用陈旧的值

function ShowSearchBar() {
    setAllowFind((previousAllowFind) => !previousAllowFind)
}