通过 React 函数组件将函数从父级传递到子级

Question

我正在尝试将函数setDir传递到SearchAppointments(父级(handleSort()Hooks(子级(，但我不断收到错误，说它们不是函数。

我试图通过在子组件的useEffect钩子中查找typeofhandleSort来调试它，尽管它控制台记录了两个语句：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，具体取决于您希望何时更新组件。 将其视为生命周期方法中的新shouldComponentUpdate。 但请谨慎使用，因为如果您不小心使用，您的应用程序可能不会更新