有没有办法在反应功能组件中只进行一次 api 调用？

Posted 2023-02-22

【中文标题】有没有办法在反应功能组件中只进行一次 api 调用？

【英文标题】：Is there a way to do an api call only once in react functional component?

【发布时间】：2020-07-06 22:04:37

【问题描述】：

对不起，如果这是一个初学者问题>

我正在尝试使用功能组件，因为我一直在使用类组件。

我有一个简单的组件，它应该从服务器加载列表并显示它。

组件看起来是这样的（如果有类型，我简化了一点很抱歉）：

const ItemRelationsList = (props: ItemRelationsListProps): JSX.Element => 
    const [getList, setList] = useState([]);

    const loadRelation = (): void => 
        HttpService.GetAsync<getListRequest, getListResponse>('getList',
            // params
        ).subscribe(res => 
            setList(res.data.list);
        );
    
    loadRelation();


  return (
    <>
        <Table
            columns=columns
            dataSource=getList
        >
        </Table>
    </>
  )

我面临的问题是每次使用 setList 时，都会重绘组件，因此重新执行 http 调用。

除了使用类组件之外，还有其他方法可以防止这种情况发生吗？

【参考方案1】：

useEffect(yourCallback, []) - 只有在 第一次渲染。

阅读文档hooks-effect

这与How to call loading function with React useEffect only once有关

【参考方案2】：

使用useEffect

如果你想运行一个效果并且只清理一次（在挂载和卸载时），你可以传递一个空数组（[]）作为第二个参数。这告诉 React 你的效果不依赖于任何来自 props 或 state 的值，所以它永远不需要重新运行。这不是作为特殊情况处理的——它直接遵循依赖项数组的工作方式。

const ItemRelationsList = (props: ItemRelationsListProps): JSX.Element => 
    const [getList, setList] = useState([]);

    // componentDidMount
    useEffect(() => 
        loadRelation()
    , [])

    const loadRelation = (): void => 
        HttpService.GetAsync<getListRequest, getListResponse>('getList',
            // params
        ).subscribe(res => 
            setList(res.data.list);
        );
    

    return (
        <>
            <Table
                columns=columns
                dataSource=getList
            >
            </Table>
        </>
    )