react state初始化问题

报错

1

Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the *** component.

大致：

不能再一个组件尚未mounted时调用 setState() 方法，这是一个空操作，但是可能会导致bug，所以， 直接给this.state 赋值，或者定义成state = {};

问题代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import React from 'react';
import { Icon } from 'antd';

class ProjMain extends React.Component {
  constructor(props) {
    super(props);
    this.setState({
      docDetail: {}
    })
  }
  
  render() {
    return (
        <div id={Style.projIndex}>
         	<h1 style={{fontSize: 40}}>{this.state.docDetail))}</h1>
        </div>
    );
  }
}

export default ProjMain;

render() 方法中如果使用了 this.state.docDetail，会导致编译报错

仔细检查代码

1
2
3
4
5
6

constructor(props) {
    super(props);
    this.setState({
      docDetail: {}
    })
  }

constructor 里使用了 setState，改为直接赋值后正常

Action

• 是行为的抽象
• 是普通的JS对象

• 一般由方法生成
• 必须有一个type

  Reducer

reducer是一个纯函数，接收旧的state和action，返回新的state

Store

hexo-asset-image

使用起来很简单，页面引入图片的方式也是md以前的语法

安装

1

npm install hexo-asset-image --save

例子

文件结构：

1
2
3
4
5

MacGesture2-Publish
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
MacGesture2-Publish.md

确保 _config.yml 中 post_asset_folder: true.

使用 ![logo](logo.jpg) 就可引用到图片 logo.jpg.

注意：

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

此种方式实hexo官方引入图片的方式，不用跟hexo-asset-image插件方式混淆

背景

最近在倒置react全家桶，自己写了个简单的Hello World程序， 在使用 react-router 的 IndexRoute时，浏览器报错

需求样式

默认主页是 Home，想通过IndexRoute实现

项目相关依赖版本

"dependencies": {
  "react": "^16.5.0",
  "react-dom": "^16.5.0",
  "react-redux": "^5.0.7",
  "react-router": "^4.3.1",
  "react-router-dom": "^4.3.1",
  "react-scripts": "1.1.5",
  "redux": "^4.0.0"
}

浏览器报错

./src/routes/index.js
27:28-38 'react-router-dom' does not contain an export named 'IndexRoute'.

很明显，新版本的react-router已经不支持IndexRoute

新老方式代码差别

老方式实现

import React from 'react';
import {IndexRoute, Route} from 'react-router';
import {BrowserRouter} from 'react-router-dom';

import Home from '../pages/Home';
import Frame from '../layouts/Frame';
import Detail from '../pages/Detail';

const routes = (
    <BrowserRouter>
        <Route path="/" component={Frame}>
            <Route exact path="/" component={Home}/>
            <Route path="/detail" component={Detail}></Route>      
        </Route>
    </BrowserRouter>
);

export default routes;

新方式实现

import React from 'react';
import {BrowserRouter, Route} from 'react-router-dom';

import Home from '../pages/Home';
import Frame from '../layouts/Frame';
import Detail from '../pages/Detail';

const routes = (
        <BrowserRouter>
            <Frame>             
                <Route path="/" exact component={Home}/>
                <Route path="/detail" component={Detail}></Route>         
            </Frame>
        </BrowserRouter>        
);

export default routes;

解释

react-router4没有indexRoute了。 react-router4版本中路由的本质变成了React组件，也就是自定义标签。所以你可以像使用组件一样是用路由。那么嵌套路由无非就是组件嵌套的写法（自定义标签嵌套而已）

放到你的App组件里面去，你把Route不要看做路由，就看做div，div里面包含的就是你要显示的内容。那么它应该在哪里，它就放在哪里（有点绕。。。，多读几遍）。
最外层就如下写: 所有请求的入口

import React, { Component } from 'react';
import {Route,Switch,NavLink} from 'react-router-dom';

class App extends React.Component {
    render() {
        return(
             <div>
                 <Header/>
                  <div>
                     <Route path="/" exact component={Home} />
                     <Route path="/topics" component={Topics} />
                     <Route path="/jobs" component={Jobs} />
                     <Route path="/remote" component={Remote} />
                  </div>

             </div> 
         )  

    }

}