我有一个可重用的组件，它需要一个editable prop ，可以从外部切换。问题是，无论何时激活该切换，整个组件都会重新呈现，包括只应调用一次的API调用。如果特定的prop editable发生了变化，我该如何防止重新渲染？或者说解决这个问题的方法是什么？
我想得到的是，无论editable属性改变多少次，组件中的API调用都只会得到一次。我如何才能做到这一点？
代码如下：
export const EditableTableList: React.FC<EditableTableListProps> = React.memo(({ columns, editEnabled, keyName, getData, sendChangeToParent }) => {
...
// THIS RERENDERS EVERYTIME EDITABLE CHANGES
useEffect(() => {
const getTableData = async () => {
setLoadedData(false);
setOriginalData(await getData());
setLoadedData(true);
}
getTableData();
}, [getData]);
...
}
3条答案
按热度按时间wgx48brx1#
getData（）将在每次父组件重新呈现时重新呈现，您可以将其作为useCallback函数表达式发送，以便即使父组件重新呈现，它也会保持相同的标识。
eagi6jfj2#
这个效果再次执行只是因为你的
getData函数发生了变化--也许不是它的内容，但肯定是示例/引用。你必须在你的父组件中记住它，例如使用
useCallback。如果你提供了父组件，我可以给予你一个例子。az31mfrm3#
通过从依赖数组中删除getData，可以解决此问题。但要回答这个问题：
当特定 prop 改变时防止重新渲染
您可以通过以下方式解决此问题。