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').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。

解决办法：

1. 安装prop-type
2. 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错误

答案一

答案二

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