首先

我打算使用楽天的API来开发React应用程序，但是遇到了困难。

只调用了一次API却收到了429错误码，导致出现了一段时间的”???”状态(´;ω;｀)。

如果你对解决方法感兴趣的话，请继续阅读，我将在这次记录下来。

执行的代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import { useState , useEffect } from 'react';
import './App.css';
import axios from "./axios";
import requests from './Requests';

function App() {
  const [largeCategory, setLargeCategory] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await axios.get(requests.fetchSmallCategory);
      setLargeCategory(response.data.result.small);
      console.log(response.data.result.small);
    }

    fetchData();
  }, []);

  return (
    <>
      <h1>Random Pick App</h1>
      <p>レシピの取得</p>
      <ul>
        {largeCategory.map((menu) => {
          return (
            <li>
              {menu.categoryName}
            </li>
          )
        })}
      </ul>
    </>
  );
}

export default App;

import axios from "axios";

const instance = axios.create({
	baseURL: "https://app.rakuten.co.jp/services/api/Recipe/CategoryList/20170426?format=json",
});

export default instance;

const API_KEY = "[API_KEY]";

const requests = {
fetchLargeCategory: `/&categoryType=large&applicationId=${API_KEY}`,
fetchMediumCategory: `/&categoryType=medium&applicationId=${API_KEY}`,
fetchSmallCategory: `/&categoryType=small&applicationId=${API_KEY}`,
};

export default requests;

解决方案 (jiě jué àn)

解决方法非常简单。
只需在创建React应用程序时删除默认情况下包含的React.StrictMode即可解决。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
   // <React.StrictMode> ここを削除
    <App />
   // </React.StrictMode>　ここを削除
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

通过删除React.StrictMode，就不会再出现被调用两次的情况了。
那么，React.StrictMode到底是做什么的？？？

React.StrictMode是什么

以下内容为官方文件的部分摘录。

工具的作用是识别应用中潜在问题的工具。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

在上面的例子中，由于内部是严格模式，所以警告会在不好的地方被触发。

然而，Strict模式仅在开发时有效，在构建的生产环境等中无法运行。

在严格模式下，某些函数会被调用两次。以下是其中的一些函数。

• コンポーネント内の関数(イベントハンドラ内のコードは含まない)

• useState, set, useMemo, useReducer関数

constructor, render, shouldComponentUpdateのようなクラスコンポーネントメソッド

这次的楽天API因为遇到了第二个问题，所以被调用了两次，返回了429，好像有点多哦。我学到了很多。

请提供参考资料。
提供所参考的文献。
请列举参考文献。
请附上文献的参考资料。
请提供文献的引用文献。