react hook useEffect 执行调用俩次，如何解决？

具体可以看：https://www.robinwieruch.de/react-hooks-fetch-data/

产生原因：1. react18的版本的问题
2. strict mode in development

解决：

1. 取消严格模式

只需要去掉React.StrictMode标签就行了。网上查相关资料说是执行多次的行为是想提醒开发者，注意清除副作用，提前暴露问题等等。

2. 借助 useRef

import React, { useState, useEffect, useRef } from 'react';
import styles from './List.module.css';
import axios from 'axios';

const List = () => {
  const renderRef = useRef(true); // 解决 useEffect 调用俩次的
  useEffect(() => {
    if (renderRef.current) {
      renderRef.current = false;
      return;
    }

    fetchData();
  }, []);

  const fetchData = () => {
    setLoading(true);
    const url = `https://cnodejs.org/api/v1/topics?page=1&tab=all&limit=20`;
    axios.get(url).then((res) => {
      setList(res.data.data);
      setLoading(false);
    });
  };

  return (
    <>....</>
  );
};

export default List;