Next.js 11 - Axios api 调用在页面加载时触发 2 次

Question

我一直在尝试将 React.js CRA 迁移到 Next.js SSR 应用程序，我专门迁移到 Next.js 11，因为我有一些仅支持 Next.js 11 的软件包 deps，因为我的 CRA 应用程序运行完美，但是当我将所有项目文件移至 Next.js 11 时，当我访问该页面时，所有 API 调用都会触发 2 次，我正在使用 React 16 和 axios 从后端获取数据，请帮助我解决此问题:

这是示例代码：

在页面/test/index.js中

"use client"

import React from 'react';
import Test from '../../src/components/test';

const Asdf = () => {
    return ( 
        <Test />
     );
}
 
export default Asdf;

这是组件：

"use client"

import Axios from 'axios';
import React, { useEffect, useState } from 'react';

const Test = () => {

    const [data, setData] = useState([])

    useEffect(() => {
        Axios.get('https://dummyjson.com/products/')
        .then(res => setData(res))
    }, [])

    return ( 
        <>
           test page
        </>
     );
}

export default Test;

在网络选项卡中，您可以注意到 4 个请求，2 个是预检，其余 2 个调用被触发：

有什么办法可以防止它或者我做错了什么，请告诉我！预先感谢。

Answer 1

您可以在 next.config.js 中添加 reactStrictMode: false

const nextConfig = {
  reactStrictMode: false,
};

添加后不要忘记重新启动项目