最近在用react-hook、electron技术站做个电脑端应用,本篇记录一下项目中遇到的一些大小问题借解决办法。

1. create-react-app 无 eject 配置代理请求

安装 http-proxy-middleware
npm install http-proxy-middleware --save-dev
添加 src/setupProxy.js 文件, 不需要另外引入到项目

1
2
3
4
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

2. 点击子元素是防止父容器点击事件的执行

e.stopPropagation();

3. react hooks Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

解决方案:

在useEffect设置flag,本地变量也行,useRef是为了全局访问。
组件已经挂在再去设置数据。

在获取数据前把当前要获取的数据设置成默认值。我目前还未实现加载更多,这样可能出现问题,后续在补充。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const App =()=>{
const isMountedRef = useRef(null);
useEffect(()=>{
isMountedRef.current = true;
getData();
return () => {
isMountedRef.current = false;
};
},[])

const getData=()=>{
// important: set your fetching data to initialState before fetch.

Fetch('get','your api').then(res=>{
if(isMountedRef.current){
// set your state or store data
}
}).catch(err=>{
console.log(err,'err');
})
}
}

4. input 获取焦点和失去焦点

1
2
3
4
5
6
7
8
9
10
11
12


<input onChange={(e) => handleChange(e.target.value)} className="search-input" ref={searchInputEl} />

const searchInputEl = useRef(null);
const bindSearch=()=>{
if(flag){
searchInputEl.current.blur(); //失去焦点
}else{
searchInputEl.current.focus(); //获取焦点
}
}

参考链接: https://www.debuggr.io/react-update-unmounted-component/