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

Question

I am trying to pass down the functions setDir and handleSort() down from SearchAppointments (parent) to Hooks (child), but I keep getting errors saying that they are not functions.

I tried to debug it by looking the typeof handleSort in the useEffect hook of the child component, though it console.logged two statements: 1) underfined 2) function. Not sure what is wrong.

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

try and use memo like this:

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);

define a function and pass that as the second argument. memo function (I've called it comparator , then returns true or false depending on when you want the component to update. think of it as the new shouldComponentUpdate in the lifecycle methods. but use with care as your application might not update if you use carelessly