React和React-native踩坑記

react坑：

一、fetch請求cookie跨域問題
使用creat-react-app時，其中的react-script已經默默幫你作了不少事，都幫你配置好了：

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.

因此你發現你找不到webpack相關的配置文件。那麼碰見跨域問題，例如cookie跨域時須要配置代理該怎麼辦呢？
解決方法：
首先，配置代理。去package.json裏添加一個proxy部分，以下：

"proxy": {
    "/*": {  //星號代全部，也能夠是 /xxx/* 或 /xxx/xxx/*
      "target": "http://10.0.209.147", //你獲取數據的服務器地址
      "ws": true, 
      "secure": true,
      "changeOrigin": true,
      "withCredentials": true, //跨域請求設置爲true
    }
  }

接下來，在fetch方法中添加跨域請求憑證credentials: 'include'

例以下面的登陸例子：

const url= "/xxxx/xxxxx/xxxx"; 
//請求地址，由於配置了代理，因此最開始處省略了主地址，直接以斜槓開始

let formData = new FormData();
formData.append('name', 'admin'); //參數，用戶名
formData.append('password', '123456'); //參數，密碼
fetch(url, {
    method: 'post', //post方法
    body: formData, //傳參
    credentials: 'include',  //此處最爲重要，請求代理憑證
}).then(function (res) {
    return res.json();
}).then(function (json) {
    alert('cookie內容：'); //此處能夠嘗試alert一下cookie裏全部的內容
    alert(json); //後臺返回的數據
});

二、react中creat-react-app的項目，完成後打包頁面訪問空白
npm run build 以後會自動生成一個build文件夾，打開其中的index.html發現頁面空白且報錯提示文件沒找到。放到服務器上仍然是空白的沒法訪問。
原來是由於路徑問題，簡單配置一下便可。上文提到過react-script已經幫咱們作好了不少事，方便在此，麻煩也在此。這個問題仍需更改其中的配置文件：

路徑：my-app\node_modules\react-scripts\config

修改path.js文件，紅框部分是修改後的結果，以下圖：

而後再從新npm run build 便可

react-native坑：

一、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.

可能對一個沒有裝載的組件執行了setState()操做，在React的官網裏有一個解決方案，isMounted
這種狀況大多出如今callback中，異步請求返回數據以前，組件可能就已經被卸載了，等數據回來再使用setState就會警告，因此應該手動在componentWillUnmount裏去取消callback

解決辦法：

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