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錯誤

答案一

答案二

這個問題我還沒解決，多是跟緩存有關係，或者跟瀏覽器插件有關，總之出現這個錯誤提示代表客戶端請求都沒有發送，服務端天然也接收不到。