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


Is there a way to do an api call only once in react functional component?

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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调用会重新执行。

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

useEffect(yourCallback, []) - will trigger the callback only after the
first render.

阅读文档钩子效果

这与如何使用 React useEffect only call loading function有关

使用useEffect

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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>
        </>
    )
}