成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React和React-native踩坑記

yck / 2447人閱讀

摘要:坑請(qǐng)求跨域問(wèn)題使用時(shí),其中的已經(jīng)默默幫你做了很多事,都幫你配置好了所以你發(fā)現(xiàn)你找不到相關(guān)的配置文件。放到服務(wù)器上仍然是空白的無(wú)法訪問(wèn)。原來(lái)是因?yàn)槁窂絾?wèn)題,簡(jiǎn)單配置一下即可。上文提到過(guò)已經(jīng)幫我們做好了很多事,方便在此,麻煩也在此。

react坑:

1、fetch請(qǐng)求cookie跨域問(wèn)題
使用creat-react-app時(shí),其中的react-script已經(jīng)默默幫你做了很多事,都幫你配置好了:

React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Import CSS and image files directly from JavaScript.
Autoprefixed CSS, so you don’t need -webkit or other prefixes.
A build script to bundle JS, CSS, and images for production, with sourcemaps.
A dev server that lints for common errors.

所以你發(fā)現(xiàn)你找不到webpack相關(guān)的配置文件。那么遇見(jiàn)跨域問(wèn)題,例如cookie跨域時(shí)需要配置代理該怎么辦呢?
解決方法:
首先,配置代理。去package.json里添加一個(gè)proxy部分,如下:

  "proxy": {
    "/*": {  //星號(hào)代所有,也可以是 /xxx/* 或 /xxx/xxx/*
      "target": "http://10.0.209.147", //你獲取數(shù)據(jù)的服務(wù)器地址
      "ws": true, 
      "secure": true,
      "changeOrigin": true,
      "withCredentials": true, //跨域請(qǐng)求設(shè)置為true
    }
  }

接下來(lái),在fetch方法中添加跨域請(qǐng)求憑證credentials: "include"

例如下面的登錄例子:

const url= "/xxxx/xxxxx/xxxx"; 
//請(qǐng)求地址,因?yàn)榕渲昧舜?,所以最開(kāi)始處省略了主地址,直接以斜杠開(kāi)始

let formData = new FormData();
formData.append("name", "admin"); //參數(shù),用戶名
formData.append("password", "123456"); //參數(shù),密碼
fetch(url, {
    method: "post", //post方法
    body: formData, //傳參
    credentials: "include",  //此處最為重要,請(qǐng)求代理憑證
}).then(function (res) {
    return res.json();
}).then(function (json) {
    alert("cookie內(nèi)容:"); //此處可以嘗試alert一下cookie里所有的內(nèi)容
    alert(json); //后臺(tái)返回的數(shù)據(jù)
});

2、react中creat-react-app的項(xiàng)目,完成后打包頁(yè)面訪問(wèn)空白
npm run build 之后會(huì)自動(dòng)生成一個(gè)build文件夾,打開(kāi)其中的index.html發(fā)現(xiàn)頁(yè)面空白且報(bào)錯(cuò)提示文件沒(méi)找到。放到服務(wù)器上仍然是空白的無(wú)法訪問(wèn)。
原來(lái)是因?yàn)槁窂絾?wèn)題,簡(jiǎn)單配置一下即可。上文提到過(guò)react-script已經(jīng)幫我們做好了很多事,方便在此,麻煩也在此。這個(gè)問(wèn)題仍需更改其中的配置文件:

路徑:my-app
ode_modules
eact-scriptsconfig

修改path.js文件,紅框部分是修改后的結(jié)果,如下圖:

然后再重新npm run build 即可

react-native坑:

1、react-native中的警告:

Warning: Can only update a mounted or mounting component. This usually means you called setState,replaceState, or forceUpdate on an unmounted component. This is a no-op.
Please check the code for the xxx component.

可能對(duì)一個(gè)沒(méi)有裝載的組件執(zhí)行了setState()操作,在React的官網(wǎng)里有一個(gè)解決方案,isMounted
這種情況大多出現(xiàn)在callback中,異步請(qǐng)求返回?cái)?shù)據(jù)之前,組件可能就已經(jīng)被卸載了,等數(shù)據(jù)回來(lái)再使用setState就會(huì)警告,所以應(yīng)該手動(dòng)在componentWillUnmount里去取消callback

解決辦法:

componentWillUnmount() {
    this.setState = (state, callback) => {
        return;
    };
};

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/90661.html

相關(guān)文章

  • react使用坑記(一)

    摘要:本文主要介紹在移動(dòng)端項(xiàng)目中如何使用及其配置使用腳手架生成的項(xiàng)目,后運(yùn)行彈出配置項(xiàng),該命令不可逆哦。使用了作為計(jì)算依據(jù),因此需要在中貼上以下代碼,并沒(méi)有使用淘寶的方案使用的設(shè)計(jì)圖是的哦配置的按需加載當(dāng)然了,你需要先。 本文主要介紹在react移動(dòng)端項(xiàng)目中如何使用antd-mobile2及其配置 使用 create-react-app腳手架生成的項(xiàng)目,后運(yùn)行npm run eject 彈出...

    toddmark 評(píng)論0 收藏0
  • react使用坑記(一)

    摘要:本文主要介紹在移動(dòng)端項(xiàng)目中如何使用及其配置使用腳手架生成的項(xiàng)目,后運(yùn)行彈出配置項(xiàng),該命令不可逆哦。使用了作為計(jì)算依據(jù),因此需要在中貼上以下代碼,并沒(méi)有使用淘寶的方案使用的設(shè)計(jì)圖是的哦配置的按需加載當(dāng)然了,你需要先。 本文主要介紹在react移動(dòng)端項(xiàng)目中如何使用antd-mobile2及其配置 使用 create-react-app腳手架生成的項(xiàng)目,后運(yùn)行npm run eject 彈出...

    _ang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<