常連

### 前提・実現したいこと
Reactの勉強中です。
yahoo apiをたたいて商品カテゴリーランキングを取得するWebアプリを作成しております。

fetch-jsonpでapiをたたいたところ下記のクロスオリジンエラーが発生しました

### 発生している問題・エラーメッセージ
**Cross-Origin Read Blocking (CORB) blocked cross-origin　response　**https://shopping.yahooapis.jp/ShoppingWebService/V2/categoryRanking?appid=XXXXXXXXXX&category_id=10002&callback=jsonp_1634193643100_26941 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

**Error: JSONP request to **https://shopping.yahooapis.jp/ShoppingWebService/V2/categoryRanking?appid=XXXXXXXXXX&category_id=10002** timed out**

※上記APIをクロームブラウザで表示するとカテゴリーランキングのjsonデータが返ってきます。


### 該当のソースコード

import fetchJsonp from 'fetch-jsonp';
import qs from 'qs';
import { replace } from 'react-router-redux';

const API_URL = 'https://shopping.yahooapis.jp/ShoppingWebService/V2/categoryRanking';
// const API_URL = 'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/categoryRanking';
const APP_ID = 'XXXXXXXXX';

//リクエスト開始
const startRequest = category => ({
  type: 'START_REQUEST',
  payload: { category },
});

//レスポンス受信
const receiveData = (category, error, response) => ({
  type: 'RECEIVE_DATA',
  payload: { category, error, response },
});

//リクエスト完了
const finishRequest = category => ({
  type: 'FINISH_REQUEST',
  payload: { category },
});

//ランキングを取得する
export const fetchRanking = categoryId => {
  //redux-thunkを使った非同期処理
  return async (dispatch, getState) => {
    //カテゴリIDに対応するstate.shopping.categoriesの要素を取得
    const categories = getState().shopping.categories;
    const category = categories.find(category => (category.id === categoryId));
    //対応するデータがない場合はトップページへリダイレクト
    if (typeof category === 'undefined') {
      dispatch(replace('/'));
      return;
    }


    dispatch(startRequest(category));

    const queryString = qs.stringify({
      appid: APP_ID,
      category_id: categoryId,
    });

    try {
      // const responce = await fetchJsonp(`${API_URL}?${queryString}`);
 **     const responce = await fetchJsonp(`${API_URL}?${queryString}`);**
      const data = await responce.json();
      dispatch(receiveData(category, null, data));
    } catch (err) {
      dispatch(receiveData(category, err));
    }
    dispatch(finishRequest(category));

  };
};

### 試したこと

chromeブラウザの拡張機能で「Access Control Allow Origin」をインストールして
クロスオリジンでもアクセスできるようにしましたが問題は解決しませんでした。

### 補足情報（FW/ツールのバージョンなど）
テスト環境URL
http://localhost:3000/

以上、ご査収の程よろしくお願い申し上げます。


追記 fetch-jsonpをfetchに変更
// const responce = await fetchJsonp(`${API_URL}?${queryString}`);
   const responce = await fetch(`${API_URL}?${queryString}`);

fetchに変えてみたところ、下記エラーが表示されました。
「Failed to load resource: net::ERR_FAILED」
API自体をたたけていないようです。
![エラー画面](6e3c0b448cf285dcc3ea424b1f780b25.png)

どうしたらAPIのデータを取得できるのかご教示いただけたら幸いです。

10/18　追記
fetchのmodeをcors指定にして、クロームブラウザの拡張ライブラリ「Access-Control-Allow-Origin」をONして
yahoo APIにアクセスしたところ、responseでデータの取得はできました
ただし、strictモードでのエラーが発生しており画面にデータを表示できていない状態です。

yahoo api(V2)はjsonpには対応していないようですがcorsには対応していると思われます。
クロスサイトオリジンの制限はブラウザでの制限なのでjsonpが使えないため
chromeの拡張ライブラリで乗り越えました。

問題がcorsからstrictモードになったので別に質問させていただきます。
ご回答者様ありがとうございました。


コードの編集
 // const responce = await fetchJsonp(`${API_URL}?${queryString}`);
 　 const responce = await fetch(`${API_URL}?${queryString}` ,{mode:'cors'});

responseデータ
![イメージ説明](6905389a6fde4d39e7f7e0d9bdf21b18.png)
![イメージ説明](752a1edb046c438f85e0d5243b5a6232.png)

Strictでのエラー
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.r (<anonymous>:1:83)
    at Object._callee$ (http://localhost:3000/static/js/bundle.js:55313:22)
    at tryCatch (http://localhost:3000/static/js/bundle.js:1218:40)
    at Generator.invoke [as _invoke] (http://localhost:3000/static/js/bundle.js:1452:22)
    at Generator.prototype.<computed> [as next] (http://localhost:3000/static/js/bundle.js:1270:21)
    at step (http://localhost:3000/static/js/bundle.js:55244:191)
    at http://localhost:3000/static/js/bundle.js:55244:437
    at new Promise (<anonymous>)
    at http://localhost:3000/static/js/bundle.js:55244:99
    at http://localhost:3000/static/js/bundle.js:55345:19
    at http://localhost:3000/static/js/bundle.js:46615:18
    at http://localhost:3000/static/js/bundle.js:46593:7806
    at Object.onUpdate (http://localhost:3000/static/js/bundle.js:55671:7)
    at Ranking.componentWillUpdate (http://localhost:3000/static/js/bundle.js:55478:20)
    at updateClassInstance (http://localhost:3000/static/js/bundle.js:23570:18)
    at updateClassComponent (http://localhost:3000/static/js/bundle.js:27457:20)
    at beginWork (http://localhost:3000/static/js/bundle.js:28970:16)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:33529:14)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:32504:12)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:32480:22)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:32106:9)
    at http://localhost:3000/static/js/bundle.js:21439:24
    at unstable_runWithPriority (http://localhost:3000/static/js/bundle.js:48446:12)
    at runWithPriority$1 (http://localhost:3000/static/js/bundle.js:21389:10)
    at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/bundle.js:21434:7)
    at flushSyncCallbackQueue (http://localhost:3000/static/js/bundle.js:21422:3)
    at discreteUpdates$1 (http://localhost:3000/static/js/bundle.js:32243:7)
    at discreteUpdates (http://localhost:3000/static/js/bundle.js:11156:12)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/bundle.js:14518:3)

Reactのfetch-jsonpでyahoo apiをたたくとcross-originエラーが発生する

### 前提・実現したいこと

デモを用意しました。
[CodeSandBox](https://codesandbox.io/s/competent-waterfall-23zk8?fontsize=14&hidenavigation=1&theme=dark)

2つのプロパティを持ったオブジェクトを格納した配列に、```forEach```で各オブジェクトに処理を施し、処理を施したオブジェクトを配列の```state```に格納したいです。

デモで言うと、下記のような表示を目指しています。
> HOGE
hogehoge
FUGA
fugafuga

新しい配列を生成する場合は```map```を使う方が相応しいと思いますが、実際のデータの取得元が```Firestore```からであり、```Firestore```から取得したデータは```map```メソッドが使えないようなので、```forEach```で実装したいです。

### 発生している問題・試したこと

処理を施したオブジェクトは配列に追加されず上書きをします。

[【React】 useStateで配列を保存するときの注意点 - Qiita](https://qiita.com/naogify/items/cef4330858d0c677e71b)
上記ページを参考にして、```setState([...配列のstate, 処理を施したオブジェクト])```と書いてみましたが、配列の```state```の中身は最後に処理を施したオブジェクト1つのみでした。

現状のデモは```hoge```オブジェクトが```fuga```オブジェクトに上書きされ、下記のように```fuga```オブジェクトのみが表示されています。
> FUGA
fugafuga

### 該当のソースコード

```javascript
const data1 = {
  title: "hoge",
  text: "hogehoge"
};
const data2 = {
  title: "fuga",
  text: "fugafuga"
};
const listData = [data1, data2];

export default function App() {
  const [array, setArray] = useState([]);
  useEffect(() => {
    listData.forEach((data) => {
      const upperTitle = data.title.toUpperCase();
      const newData = { title: upperTitle, text: data.text };
      setArray([...array, newData]);
    });
  }, []);

  const list = array.map((item, index) => (
    <div key={index}>
      <p>{item.title}</p>
      <p>{item.text}</p>
    </div>
  ));

  return <>{list}</>;
}
```