React項(xiàng)目經(jīng)驗(yàn)總結(jié)及遇到的坑

更新時(shí)間：2022年07月13日 10:44:12 作者：接著奏樂(lè)接著舞

這篇文章主要介紹了React項(xiàng)目經(jīng)驗(yàn)總結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、報(bào)錯(cuò) xxx.map is not a function
2、如何將后端返回的二進(jìn)制流轉(zhuǎn)換為base64格式的展示？
3、下載
4、父組件如何把值傳給子組件？子組件又如何接收？
5、父組件如何獲取子組件所有的state里面定義的值？
6.antd+react 之layout左側(cè)菜單點(diǎn)擊時(shí)加背景色--高亮（適用于每一個(gè)項(xiàng)目）

1、報(bào)錯(cuò) xxx.map is not a function

錯(cuò)誤原因：因?yàn)楹蠖藬?shù)據(jù)還沒(méi)收到，數(shù)組是空的，而map方法不會(huì)對(duì)空數(shù)組檢測(cè)，結(jié)果報(bào)錯(cuò)

解決：

拓展：Array.isArray(obj) 如果對(duì)象是數(shù)組，返回的是true，否則false

2、如何將后端返回的二進(jìn)制流轉(zhuǎn)換為base64格式的展示？

語(yǔ)法：

<img width="40" height="30" src=`data:image/jpg;base64,${xxx}`/>

xxx指的是：后端返回的圖片的字段，如 logo、 galleryImage......

3、下載

1）直接window.open ( 請(qǐng)求的接口 )

這個(gè)會(huì)閃屏

2）也可以自己寫(xiě)一個(gè)點(diǎn)擊事件進(jìn)行下載

原理是動(dòng)態(tài)創(chuàng)建a標(biāo)簽，設(shè)置href屬性

/**
* 下載資料
* @param {Number} e 當(dāng)前點(diǎn)擊項(xiàng)  name：文件名  format：文件格式  api_url：請(qǐng)求接口
*/
handleDownFile = (event, name, format, api_url) => {
  event.preventDefault();
  event.stopPropagation();
  //開(kāi)啟loading 按鈕置灰
  this.setState({
    loadingStatus: true,
    buttonDisabled: true,
  });
  fetch(api_url, {
    method: "get",
    // 下面兩行可以不用要
    credentials: "include",
    headers: new Headers({
      "Content-Type": "application/json",
      // 'X-Auth-Token': User.getToken(),
    }),
  })
    .then((response) => {
    response.blob().then((blob) => {
      //關(guān)閉loading 按鈕恢復(fù)正常
      let blobUrl = window.URL.createObjectURL(blob);
      const filename = name + `.${format}`; // 設(shè)置文件名稱 eg: test.zip
      const aElement = document.createElement("a"); // 獲取a標(biāo)簽元素
      document.body.appendChild(aElement);
      aElement.style.display = "none";
      aElement.href = blobUrl; //設(shè)置a標(biāo)簽路徑
      aElement.download = filename;
      aElement.click();
      document.body.removeChild(aElement);
      this.setState({
        loadingStatus: false,
        buttonDisabled: false,
      });
    });
  })
    .catch((error) => {
    //關(guān)閉loading 按鈕恢復(fù)正常
    this.setState({
      loadingStatus: false,
      buttonDisabled: false,
    });
  });
  };