时间戳

首页 > 解决方案 > 有没有办法在反应功能组件中只进行一次 api 调用？

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

问题描述

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

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

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

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

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 调用。

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

标签： reactjs

解决方案

使用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>
        </>
    )
}

推荐阅读