有没有办法在react功能组件中只调用一次api？

Question

抱歉，如果这是一个初学者问题

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

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

组件如下所示（如果有类型，我有点抱歉）：

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调用会被重新执行。

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

Answer 1

USEPERP（你的Callback, []) - 只会在第一次渲染后触发回调。

阅读文档挂钩效果

这与如何只调用一次带有React-useEffect的加载函数有关

Answer 2

使用效果

如果希望运行一个效果并只清理一次（装载和卸载时），可以将空数组（[]）作为第二个参数传递。这告诉React，您的效果不依赖于道具或状态的任何值，因此它永远不需要重新运行。这并不是作为特例处理的——它直接遵循依赖项数组的工作方式。

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