React 的错误提示

一、使用 JXS 报错

Uncaught SyntaxError: Unexpected token <

原因:凡是在页面中直接使用 JSX 的地方,都要加上 type=”text/babel”,在引用 JS 文件的地方加上 type=”text/babel”

二、表达式引号

     Minified React error #94;
     
    // 错误
    <h1 onClick="{this.handleClickOnTitle}">React</h1>
    // 正确
    <h1 onClick={this.handleClickOnTitle}>React</h1>

{}表达式不需要引号括起来

三、static defaultProps

static defaultProps = {
    likedText: '取消',
    unlikedText: '点赞'
}
//由于是用ES6 class语法创建组件,其内部只允许定义方法,而不能定义属性,class的属性只能定义在class之外。所以defaultProps要写在**组件外部**

LikeButton.defaultProps = {
        likedText: '取消',
        unlikedText: '点赞'
    }

四、代码书写不对

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

这个错误一般是 某个地方书写不对

例如:

React.component     //  首字母应该大写

五、输入值属性


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`

原因:在输入上设置了一个值属性,但是不提供任何处理程序来更新它
1、设置默认值–defaultValue
2、设置只读–readOnly
3、设置更改函数–onChange

六、table属性

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

原因:在React中<tr>元素不可以作为<table>元素的直接子元素
解决方法:加入thead/tbody即可

七、.遍历数组元素

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>
    )
});

八、constructor无法使用this.props

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

九、react中父级props改变,更新子级state

原因:父组件传递给子组件的props发生改变时,state不会自动更新,并没有执行子组件的constructor函数,同时引发子组件的render,子组件的this.props的值也是从render函数开始执行的时候开始更新的,render之前生命周期函数中都是获取不到最新的this.props的.子组件没有被卸载自然不会重新加载,只会重新render,我们需要重新处理下,将props转换成自己的state,使用componentWillReceiveProps(nextProps)

父组件的props传递给子组件的state只会在第一次加载的时候被赋值,后续的父组件props变化并不会被赋值到子组件的state上

十、react router BrowserRouter 的坑
1、刷新非首页出现Cannot get Page
原因:自身的特性
解决:

devServer: {
   historyApiFallback: true,
}

//第二种方法
BrowserRouter 改为 HashRouter

2、打包后绝对路径有问题
需要服务端配置或改为HashRouter

    原文作者:bh_chen
    原文地址: https://segmentfault.com/a/1190000015077584
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞