按钮功能在使用外部组件的 React Hooks 中不起作用答案

【问题标题】：Button function is not working in React Hooks using external components按钮功能在使用外部组件的 React Hooks 中不起作用
【发布时间】：2021-06-14 09:23:50
【问题描述】：

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

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

 <NextButton function={ShowSearchBar}/>

然后，我的另一个组件 TitleHeader 接收数组并使用映射函数呈现其中的组件

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

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

如果我调试程序，当我按下按钮时，程序进入 ShowSearchBar 功能但 ALWAYS allowFind 是错误

注意：如果我直接在 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>
  );
};

【问题讨论】：

按下 NextButton 时你的 useEffect 被撤销了吗？

标签： javascript reactjs react-native rxjs react-hooks

【解决方案1】：

如果您对状态的更新仅取决于其当前值，请始终使用调度程序的函数回调版本，这将保证您不会使用过时的值

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

【讨论】：