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

【问题标题】：Is there a way to do an api call only once in react functional component?有没有办法在反应功能组件中只进行一次 api 调用？
【发布时间】：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 调用。

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

【问题讨论】：

标签： reactjs

【解决方案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>
        </>
    )
}

【讨论】：