aemoe / fairy Goto Github PK

问题

如何在后端运行时,忽略css文件,防止nodejs后端服务器报错|node服务器不能正确解析css文件,所以会出现报错|使用asset-require-hook插件排除css,也可以排除sass文件,防止nodejs读取css报错.

原因

前后端生成的css-modules不同,造成了部署到服务器时,会造成读不到样式,然后页面闪现问题|原因是由于使用的组件css-modules-require-hook也是根据css-modules的机制,以file-path路径进行生成的hash,所以由于css-modules-require-hook和webpack的目录不同,所以造成了生成的hash不一样只的问题|只需要在css-modules-require-hook组件中使用rootDir,将两个目录一致即可

解决方案

后端React 使用renderToString渲染 图片路径变为hash码名称|原因是由于Nodejs加载文件时,会自动转为hash名称|使用插件asset-require-hook钩子来返回正确的图片名称

require('asset-require-hook')({
  extensions: [
    'jpg', 'png', 'gif', 'webp'
  ],
  name: '[name].[ext]',
  limit: 2000
});

MacBook-Pro:fairy jack$ npm start

[email protected] start /Users/alan/Desktop/fairy
cd client && npm run build && cd ../ && cross-env NODE_ENV=production pm2 start ./app.js --watch

[email protected] build /Users/alan/Desktop/fairy/client
npm run clean && npm run build:webpack

[email protected] clean /Users/alan/Desktop/fairy/client
rimraf ../public

sh: rimraf: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] clean: rimraf ../public
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] clean script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alan/.npm/_logs/2018-10-14T02_39_24_992Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: npm run clean && npm run build:webpack
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alan/.npm/_logs/2018-10-14T02_39_25_017Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: cd client && npm run build && cd ../ && cross-env NODE_ENV=production pm2 start ./app.js --watch
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alan/.npm/_logs/2018-10-14T02_39_25_039Z-debug.log

如题：准备入坑。

问题

控制台报错
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$xvrt44g6a8' of null
at Object.getClosestInstanceFromNode.
和
Uncaught RangeError: Maximum call stack size exceeded

原因

未知,可能是图片重复使用或者堆栈造成内存溢出和报错

解决方案

将
render((
    <Provider store={store}>
        {routes}
    </Provider>
), document.getElementById('root'));
改为
render((
  <div>
    <Provider store={store}>
        {routes}
    </Provider>
  </div>
), document.getElementById('root'));

问题

谷歌报错 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the App component.

原因

原因是未及时清除掉定时器或者变量,造成了报错会造成内存溢出|使用this定义变量,然后用componentWillUnmount()中清除定时器,方法见官方定时器demo,如下:

解决方案

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}
ReactDOM.render(<Timer />, mountNode);

问题

React点击空白部分隐藏弹出层

原因

React事件的坑，需求可以简化为：点击框体以外的部分则隐藏框体。最直接的想法，document上绑定个事件，设置控制显示隐藏的state为false，在框体上绑定个事件，阻止冒泡。这样点击框体内部就不会触发document上的事件。

解决方案

1.React为了提高效率，把事件都委托给了document，所以 e.stopPropagation() 并非是不能阻止冒泡，而是等他阻止冒泡的时侯，事件已经传递给document了，没东西可阻止了。可以通过在document.body上绑定 alert（3），直观的了解这一点，3 是优先于 1 弹出的。

2.e.stopPropagation()不行，浏览器支持一个好东西，e.stopImmediatePropagation() 他不光阻止冒泡，还能阻止在当前事件触发元素上，触发其它事件。这样即使你都绑定到document上也阻止不了我了吧。
这样做还不行，React对原生事件封装，提供了很多好东西，但也省略了某些特性。

3.e.stopImmediatePropagation() 就是被省略的部分，然而，他给了开口：e.nativeEvent ，从原生的事件对象里找到stopImmediatePropagation()，完活

class Test extends React.Component{
    componentDidMount(){
        document.onclick=this.two;
    }
    one(e){
        e.nativeEvent.stopImmediatePropagation();
        alert(1)
    }
    two(){
        alert(2)
    }
    render(){
        return(<div style={{height:150,width:150,backgroundColor:"#000"}} onClick={this.one}/>)
    }
}

ReactDOM.render(
    <Test/>,
    document.getElementById("test")
);

bcrypt这个轮子npm install找不到，是不是改名字为bcryptjs了呢

问题

使用passport时,一直无法写入cookie,并无法验证通过

原因

原因是由于没有在执行代码的时候,写入await让验证操作执行完在进行后续操作,造成了问题

解决方案

只需要增加await,等待异步执行完成后传接成功内容给http body,代码如下:

 await passport.authenticate('local', function(err, user, info, status) {.....}

问题

引入react-hot-loader3之后报错
Warning: ExceptionsManager.js:76 does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.
和
Warning: [react-router] You cannot change ; it will be ignored

原因

第一个问题未知,请参考client/redux的文件夹里面的设置可以解决
第二个问题是react-router组件v2和v3版本的问题,官方说并不影响热替换

解决方案

react-router3 在使用react-hot-loader3时会出现报错的问题, 不需要管它, 这并不影响使用 如果想解决可以给router加随机数

或者更换react-router4 即可

已找到原因：user数据库表很多字段为NOT NULL，注册的时候没有填充这些NOT NULL字段，导致插入数据失败。

问题

使用方法传递参数的正确写法

解决方案

方法一:

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(props0, props1, ...) {
    //code
  }
  render() {
      <button onClick={this.handleClick.bind( props0, props1, ...}></button>
  }
}

方法二:

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event, arg1, arg,……) {
    console.log(event.target);
    //code
 }
  render() {
      <button onClick={(event, arg1, arg2,……) => {this.handleClick(event, arg1, arg2,……)}>
      </button>
  }
}