20190126杂七杂八

react-router V4的路由嵌套问题

我们知道react-router v4的路由嵌套并不是根据Route的嵌套关系来实现的，一般实现有两种方法，一种是通过在父组件写子路由，这种方法使路由比较分散，而且子路由必须包含根路径。但是我在项目中用这种方式实现嵌套路由发现子组件不能加载成功，即页面没有显示，但也不会报错。后来改用第二种实现方式，发现可以。这是为什么呢,还没有找出来~

//route.js
class Routes extends React.Component{

     render(){

         return(
  <BrowserRouter>
       <div>
          <Switch>
            <Route path='/' render={({history,location,match})=>(
              <Home history={history} location={location} match={match}>
                 <Route  exact path='/' component={Note_List} ></Route>
                 <Route  exact path='/note/:noteid' component={articleDetail} ></Route>
                 <Route  exact path='/home' component={Note_List} ></Route>
                 <Route  exact path='/user/note' component={articleEdit }></Route>
                 <Route  exact path='/user/notes' component={articleList } ></Route>
                  <Route  exact path='/about' component={About}></Route>
                </Home>
              )} />
             </Switch>
          </div>
      </BrowserRouter>
)}
}

//home.js
class Home extends React.Component{
    
    render(){
        return(
                <div className='container'>
                    <div>
                       {this.props.children}
                    </div>
                </div>
           
        )
    }
}
export default Home

React项目中提示 this.props.params undefined

我使用的代码是this.props.actionNotes.findOneNote(this.props.match.params.noteid);,实际上浏览器提示的是“noteid找不到”，然后通过加上console.log(this.props.params);发现实际上是this.props.params未定义，然后通加上console.log(this.props);发现要获取的noteid属性是在this.props.match.params里，将this.props.params.noteid改成this.props.match.params.noteid即可

在stackoverflow可找到相关答案

React项目中提示 Cannot read property ‘array’ of undefined

这个问题困扰了我好长时间，由于是在升级react和react-dom版本之后才出现这个问题的，我就以为是react版本的问题，然后就降低react的版本，试了好几个版本后发现问题依旧这样，甚至还出现了新的错误提示。然后咨询了一下发现有可能是代码中有数组未定义，然后就想调试下找到错误代码。由于我的项目只支持打包，即npm run build,然后我就将代码放在create-react-app环境下，让它支持npm start，最后通过执行npm start就发现了代码里面其实还存在好多问题，而这些问题npm run build是不能发现的，例如react-router中没有IndexLink了，但是项目中依然使用了indexLink，还有很多问题，而这些问题居然都没有被发现，所以以后前端代码还是好好放在完整的脚手架环境吧，不能直接build之后传给服务端就行了，还是要通过npm start来调试，npm start会发现更多的问题。多么痛的领悟~~~!

react 表单重置时提示 reset is not a function

<form action="" method="post" id="LoginForm">
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" />
  <input type="submit" id="submit" name="submit" value="Login" />
  <input type="reset" id="reset" name="reset" value="Reset" />
</form>

JS方法:document.getElementById('LoginForm').reset() 或者使用jquery:```` $('#LoginForm')[0].reset()` 或者 `$ ('#LoginForm').trigger("reset")`

但此时会出现上面的提示，问题在于id="reset"和name="reset"，这里的reset属性覆盖了原来的reset方法，自然无法调用并提示is not a function，解决的办法也很简单，避免用reset关键词来命名reset按钮的name和id属性。比如下面的命名方式则比较保险：

<input type="reset" id="ResetButton" name="ResetButton" value="Reset" />

使用 PropTypes 进行类型检 ,控制台报:TypeError: Cannot read property 'string' of undefined

从 React v15.5 开始，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库来定义contextTypes。

解决办法：

安装prop-type

import PropTypes from 'prop-types'

修改之前的代码为：

ToDoList.propTypes={
    title:PropTypes.string
}

Access to XMLHttpRequest at 'localhost:3000/api/user/login' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

网上大部分的解决方法是配置跨域，尝试之后发现还是不行。然后我修改了axios发出请求的的baseurl，就消除了这个问题。

chrome 里面js提示Provisional headers are shown错误

答案一

答案二

这个问题我还没解决，可能是跟缓存有关系，或者跟浏览器插件有关，总之出现这个错误提示表明客户端请求都没有发送，服务端自然也接收不到。