Question

我正在尝试将功能setDir和handleSort()从SearchAppointments（父级）向下传递到Hooks（子级），但是我不断收到错误消息，说它们不是功能。

我尝试通过在子组件的typeof钩子中查看handleSort useEffect来调试它，尽管它控制台记录了两个语句：1）未定义2）函数。不知道出什么问题了。

const SearchAppointments = React.memo(() => {
  const [orderDir, setDir] = useState("");

  const handleSort = (e) => {
    let value = e.target.value;
    setDir(value);
    let order;
    let filterData = data;
    if (orderDir === 'asc') {
      order = 1;
    } else {
      order = -1;
    }
  };

  return (
    <>
      <div>
        <Hooks handleSort={handleSort} setDir={setDir} />
      </div>
    </>
  );
});

const Hooks = React.memo(({ handleSort, setDir }) => {
  useEffect(() => {
    console.log(typeof handleSort);
  }, []);

  return (
    <div>
      <div>
        <button type="button" onClick={() => setDir("success")}>
          Set Dir
        </button>
        <button type="button" value='asc' onClick={handleSort}>
          Handle Sort (Asc)
        </button>
        <button type="button" value='dsc' onClick={handleSort}>
          Handle Sort (Dsc)
        </button>
      </div>
    </div>
  );
});

Answer 1

像这样尝试并使用memo：

const comparator = (previous, next) => {
    if (something) {
       return true
    }
    return false
}

const Hooks = React.memo(({ handleSort, setDir }) => {
  useEffect(() => {
    console.log(typeof handleSort);
  }, []);

  return (
    <div>
      <div>
        <button type="button" onClick={() => setDir("success")}>
          Set Dir
        </button>
        <button type="button" value='asc' onClick={handleSort}>
          Handle Sort (Asc)
        </button>
        <button type="button" value='dsc' onClick={handleSort}>
          Handle Sort (Dsc)
        </button>
      </div>
    </div>
  );
}, comparator);

定义一个函数并将其作为第二个参数传递。 memo函数（我将其称为comparator，然后根据您希望组件更新的时间返回true或false。将其视为新的{{1 }}的生命周期方法。但是请谨慎使用，因为如果使用不当，应用程序可能不会更新

通过React功能组件将功能从父级传递到子级

1 个答案: