React和React-native踩坑记

发布时间:2019-06-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React和React-native踩坑记脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

react坑:

1、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部分,如下:

React和React-native踩坑记

  "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); //后台返回的数据
});

2、react中creat-react-app的项目,完成后打包页面访问空白
npm run build 之后会自动生成一个build文件夹,打开其中的index.htML发现页面空白且报错提示文件没找到。放到服务器上仍然是空白的无法访问。
原来是因为路径问题,简单配置一下即可。上文提到过react-script已经帮我们做好了很多事,方便在此,麻烦也在此。这个问题仍需更改其中的配置文件:

路径:my-appnode_modulesreact-scriptsconfig

修改path.js文件,红框部分是修改后的结果,如下图:

React和React-native踩坑记

然后再重新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.

可能对一个没有装载的组件执行了setState()操作,在React的官网里有一个解决方案isMounted
这种情况大多出现在callback中,异步请求返回数据之前,组件可能就已经被卸载了,等数据回来再使用setState就会警告,所以应该手动在componentWillUnmount里去取消callback

解决办法:

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

脚本宝典总结

以上是脚本宝典为你收集整理的React和React-native踩坑记全部内容,希望文章能够帮你解决React和React-native踩坑记所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。