React 的錯誤提示

1、使用 JXS 報錯

Uncaught SyntaxError: Unexpected token <

緣由：凡是在頁面中直接使用 JSX 的地方,都要加上 type="text/babel"，在引用 JS 文件的地方加上 type="text/babel"

2、表達式引號

Minified React error #94;
     
    // 錯誤
    <h1 onClick="{this.handleClickOnTitle}">React</h1>
    // 正確
    <h1 onClick={this.handleClickOnTitle}>React</h1>

{}表達式不須要引號括起來

3、static defaultProps

static defaultProps = {
    likedText: '取消',
    unlikedText: '點贊'
}
//因爲是用ES6 class語法建立組件，其內部只容許定義方法，而不能定義屬性，class的屬性只能定義在class以外。因此defaultProps要寫在**組件外部**

LikeButton.defaultProps = {
        likedText: '取消',
        unlikedText: '點贊'
    }

4、代碼書寫不對

Uncaught TypeError: Super expression must either be null or a function, not undefined

這個錯誤通常是 某個地方書寫不對

例如：

React.component     //  首字母應該大寫

5、輸入值屬性

Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`

緣由：在輸入上設置了一個值屬性，可是不提供任何處理程序來更新它
一、設置默認值--defaultValue
二、設置只讀--readOnly
三、設置更改函數--onChange

6、table屬性

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>

緣由：在React中<tr>元素不能夠做爲<table>元素的直接子元素
解決方法：加入thead/tbody便可

7、.遍歷數組元素

Warning:Each child in an array or iterator should have a unique "key" prop

緣由：在React中數組遍歷返回元素或組件時需加上key屬性做爲惟一標識
解決：

address.map((item, index) => {
    return (
        <ul class="items">
            <li class="item" key={index}>{item}</li>
        </ul>
    )
});

8、constructor沒法使用this.props

super(props)的目的：在constructor中可使用this.props

9、react中父級props改變，更新子級state

緣由：父組件傳遞給子組件的props發生改變時，state不會自動更新，並無執行子組件的constructor函數,同時引起子組件的render，子組件的this.props的值也是從render函數開始執行的時候開始更新的，render以前生命週期函數中都是獲取不到最新的this.props的.子組件沒有被卸載天然不會從新加載，只會從新render,咱們須要從新處理下，將props轉換成本身的state，使用componentWillReceiveProps(nextProps)

父組件的props傳遞給子組件的state只會在第一次加載的時候被賦值，後續的父組件props變化並不會被賦值到子組件的state上

10、react router BrowserRouter 的坑
一、刷新非首頁出現Cannot get Page
緣由：自身的特性
解決：

devServer: {
   historyApiFallback: true,
}

//第二種方法
BrowserRouter 改成 HashRouter

二、打包後絕對路徑有問題須要服務端配置或改成HashRouter