React Web開發中常見的異常提示以及解決方案

使用React 開發web app的過程當中，總會有踩坑的時候，針對常見的各類異常提示，做如下彙總，以便幫助你們避免少踩坑

彙總中會有相關對應的錯誤異常栗子用法

1. Uncaught TypeError: Cannot read property xxx of undefined

這個異常基本上是開發過程當中最多見的異常了，引起異常的使用場景也有不少，舉幾個栗子：

• 未初始化state的屬性值便直接使用

class App extends Component {
    state = {}  
    componentDidMount() {
        axios.post('https://extension-ms.juejin.im/resources/gold', {category: 'frontend'})
            .then(res => {
                this.setState({data: res.data.data});
            });
    }
    render() {
        return (
            <div className="App">
                {
                    this.state.data.map(v => <span key={v.id}>{v.title}</span>)
                }
            </div>
        );
    }
}
// 處理方案有幾種
// 1: 初始化state --> state = {data: []}
// 2: 採用短路寫法 this.state.data && this.state.data.map()

• 未初始化組件的props參數值

// 使用組件時，數據來自異步獲取
// 1: 初始化props (推薦)
class Greeting extends React.Component {
  static defaultProps = {   
    person: { name: 'react' }
  }

  render() {
    return (
      <div>Hello, {this.props.person.name}</div>
    )
  }
}
// 也能夠
Greeting.defaultProps = {
  name: 'Stranger'
};
// 2: render時初始化
render() {
    const { person = {name: 'react'} } = this.props;
    return (
      <div>Hello, {person.name}</div>
    )
}
// 其餘

2. this的綁定問題

testClick() {
    console.log(this.state.data)
}
render() {
    return (
        <button onClick={this.testClick}>測試</button>
    );
}

處理綁定的有三種方式：

(1) 調用函數時綁定：onClick={this.testClick.bind(this)}

(2) 構造函數中綁定：

constructor (props) {
    super(props)
    this.testClick = this.testClick.bind(this)
}

(3) 箭頭函數：(我的推薦箭頭函數，更便捷)

testClick = () => {
    console.log(this.state.data)
}

3. 循環key的問題

設置惟一的key值防止對已存在的dom從新渲染

this.state.data.map(v => <span key={v.id}>{v.title}</span>)
// 設置惟一性的id,不要設置循環的index
// bad
this.state.data.map((v, i) => <span key={i}>{v.title}</span>)

官方給了一個用index做爲key致使的問題demo: 戳我查看codepen

4. componentDidUpdate或componentWillUpdate 中更新state問題

// 通常問題是須要經過props來更新state致使的
// 老版本的在componentWillReceiveProps中修改state
componentWillReceiveProps(nextProps) {
    this.setState({data: nextProps.data});
}
// 16.3之後的新版本在getDerivedStateFromProps中更新state
static getDerivedStateFromProps(nextProps, prevState) {
    return {
        data: nextProps.data
    }
}

5. Objects are not valid as a React child 組件參數設置異常 或者直接渲染對象

render(){
    const obj = {a: 1};
    return (
        <span>{obj}</span>  
        // --> <span>{obj.a}</span>
    )
}

const CompA = (data) => <span>{data}<span> 
// --> ({data}) => <span>{data}</span>

6. 忘記export 組件

找到對應的組件，export 便可

7. .map （xxx） is not a function

和上面很相似，這個問題常發生在數據來自異步加載，沒有進行相應的初始化或者初始化不規範，數據類型不一致致使的問題

8. 組件沒有return DOM

// error
render() {
    <div className="App">
    </div>
}
// yes
render() {
    return(
        <div className="App">
        </div>
    )
}

9. 使用未知的標籤或者組件名稱使用小寫

The tag <test> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

其實就是字面意思，找到對應的標籤，改爲首字母大寫

10. 路由外使用link組件

使用Link的組件必須在用Router包裹的組件下使用

若是不是局部刷新的頁面，可在最外層寫一個空白的路由頁面組件將內容頁面包裹

const BlankPage = () => (
    <HashRouter>
        <Route path="/" component={App} />
    </HashRouter>
)
export default BlankPage;

11. 跳轉相同路由報錯

Warning: You cannot PUSH the same path using hash history

<Link
    to={somePath}
    replace={somePath === this.props.location.pathname}
>
跳轉
</Link>

// history操做，判斷跳轉路由相同的話，用replace
this.props.history.push  --> this.props.history.replace

總結

總結來看這些bug都比較簡單，有時候細節和不規範每每會致使一些常見或者莫名bug，制定開發規範或文檔能夠輕鬆避免一些不必的bug，年中了，祝你們bug愈來愈少，加班愈來愈少~

如有常見問題遺漏，歡迎大佬隨時補充。

前端攻城獅3羣：743490497。歡迎各位同窗進羣分享和交流。