Question

我创建了带有下拉菜单的功能组件。每当用户选择一个新值时，我都会向消费组件发送一个事件。我正在为选定的索引使用钩子。我意识到钩子异步工作。选择新值后，旧值将过帐到使用组件。所以我开始使用“ useEffect”。但是useEffect具有在变量初始化时调用的副作用。无论如何，有没有告诉REACT在初始化时不要发送事件给useEffect，所以我在初始化时不发送选择的更改事件？您只是添加一个布尔变量（如hasBeenInit）还是有一些更聪明的东西？

https://codesandbox.io/s/blissful-clarke-ky1nr?fontsize=14&hidenavigation=1&theme=dark

import React, { useState, useEffect } from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";

const DropdownPaging = props => {
  const [selectedValue, setSelectedValue] = useState(10);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [pageIndex, setPageIndex] = useState(0);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  function dropDownChanged(val) {
    setSelectedValue(val);
  }

  useEffect(() => {
    triggerEventChange(selectedValue, pageIndex);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedValue, pageIndex]);

  function pageIndexIncremented() {
    setPageIndex(counter => counter + 1);
  }

  function pageIndexDecremented() {
    if (pageIndex >= 1) {
      setPageIndex(counter => counter - 1);
    } else {
      setPageIndex(0);
    }
  }

  function triggerEventChange(take, index) {
    if (props.valueChanged) {
      props.valueChanged({ take: take, pageIndex: index });
    } else {
    }
  }

  return (
    <div>
      <table>
        <tr>
          <td>
            <Button
              outline
              disabled={pageIndex === 0}
              color="dark"
              onClick={pageIndexDecremented}
            >
              &lt;
            </Button>
          </td>
          <td>{pageIndex}</td>
          <td>
            <Button outline color="dark" onClick={pageIndexIncremented}>
              &gt;
            </Button>
          </td>
          <td>
            <Dropdown isOpen={dropdownOpen} toggle={toggle}>
              <DropdownToggle caret outline color="dark">
                {selectedValue}
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem onClick={() => dropDownChanged(10)}>
                  10
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(25)}>
                  25
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(50)}>
                  50
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(100)}>
                  100
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </td>
        </tr>
      </table>
    </div>
  );
};

export default DropdownPaging;

Answer 1

您可以使用{'h', 'l', 'o'}模拟组件是否已安装，因此您的组件将变为：

useRef

更新的沙箱：https://codesandbox.io/s/dropdownpager-urvrp

Answer 2

布尔值是一个选项。如果您需要在应用程序的其他位置执行此操作，则可以创建一个自定义钩子：

const useEffectIgnoringInit = (callBack, watchedValues) => {
  const [hasBeenInit, setHasBeenInit] = useState(true);
  useEffect(() => {
    if(hasBeenInit){
      callBack();
    } else {
      setHasBeenInit(true);
    }
  }, watchedValues);
}

然后使用它代替useEffect：

useEffectIgnoringInit(() => {
  triggerEventChange(selectedValue, pageIndex);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedValue, pageIndex]);

初始化时跳过挂钩更改（useEffect）

2 个答案: