React和React-native踩坑记

yck 发布于2019-08-21 18:38 / 2325人阅读

摘要：坑请求跨域问题使用时，其中的已经默默帮你做了很多事，都帮你配置好了所以你发现你找不到相关的配置文件。放到服务器上仍然是空白的无法访问。原来是因为路径问题，简单配置一下即可。上文提到过已经帮我们做好了很多事，方便在此，麻烦也在此。

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部分，如下：

  "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-app
ode_modules
eact-scriptsconfig

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

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

云服务器 idc机房托管踩坑记 react-native React-Native版Mung 遇坑记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90661.html

react使用踩坑记（一）

摘要：本文主要介绍在移动端项目中如何使用及其配置使用脚手架生成的项目，后运行弹出配置项，该命令不可逆哦。使用了作为计算依据，因此需要在中贴上以下代码，并没有使用淘宝的方案使用的设计图是的哦配置的按需加载当然了，你需要先。本文主要介绍在react移动端项目中如何使用antd-mobile2及其配置使用 create-react-app脚手架生成的项目，后运行npm run eject 弹出...

toddmark 2019-08-29 15:33 评论0 收藏0
react使用踩坑记（一）

摘要：本文主要介绍在移动端项目中如何使用及其配置使用脚手架生成的项目，后运行弹出配置项，该命令不可逆哦。使用了作为计算依据，因此需要在中贴上以下代码，并没有使用淘宝的方案使用的设计图是的哦配置的按需加载当然了，你需要先。本文主要介绍在react移动端项目中如何使用antd-mobile2及其配置使用 create-react-app脚手架生成的项目，后运行npm run eject 弹出...

_ang 2019-08-26 11:57 评论0 收藏0
react使用踩坑记（一）

摘要：本文主要介绍在移动端项目中如何使用及其配置使用脚手架生成的项目，后运行弹出配置项，该命令不可逆哦。使用了作为计算依据，因此需要在中贴上以下代码，并没有使用淘宝的方案使用的设计图是的哦配置的按需加载当然了，你需要先。本文主要介绍在react移动端项目中如何使用antd-mobile2及其配置使用 create-react-app脚手架生成的项目，后运行npm run eject 弹出...

ningwang 2019-08-05 14:02 评论0 收藏0
React验证码组件实现-踩坑记_07

摘要：验证码组件实现最近一直在写和改的死循环过程总结一下自己修改的一个验证码组件原生实现输入框代码防止获取焦点错误延迟一下监听删除状态这边实现的不是很好下次再改吧焦点变化验证码组件常见的六位数字验证码实现效果加了一个全部清 React验证码组件实现最近一直在写bug和改bug的死循环过程总结一下自己修改的一个验证码组件原生实现输入框代码 import React, { PureComp...

Richard_Gao 2019-08-05 18:09 评论0 收藏0
React中Ref 的使用 React-踩坑记_05

摘要：中的使用在典型的数据流中，是父组件与其子组件交互的唯一方式。创建是使用属性创建的，并通过属性附加到元素。此外，这不适用于功能组件。如果使用或更高版本，我们建议在这些情况下使用。引用转发允许组件选择将任何子组件的引用公开为自己的组件。 React中Ref 的使用 React v16.6.3 在典型的React数据流中，props是父组件与其子组件交互的唯一方式。要修改子项，请使用new...

glumes 2019-08-05 18:08 评论0 收藏0