大概的代码如下:
interface Props {
onChange?: () => void;
}
const MyComponent: React.FC<Props> = (props: Props) => {
const { onChange } = props;
const [checkedItems, setCheckedItems] = React.useState([]);
React.useEffect(() => {
onChange?.(checkedItems);
}, [checkedItems, onChange]);
}
能够正常工作,但是有一个问题,该 effect 每次 re-render 的时候,都会被调用。
因为 parent component 也是一个 function component ,所以,onChange 的 reference/pointer 总是在变。
我想把 onChange 从 dependency list 里面去掉,但 ts/eslint 一直警告,不让我这么干...
我现在能够做的就是在 parent component 里面,使用 useCallback 或者 useMemo 记住这个方法,再传递给子组件 MyComponent's props
const onChange = useCallback(()=> {});
虽然能够解决问题,但要求 parent 在使用 MyComponent 的时候,知道这个细节。我觉得这样不是好的 design 。
有没有什么办法改进一?难道要去 disable ts/eslint 的警告?
谢谢!
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.