React 的错误提示

2024年1月18日 309次阅读 来源: bh_chen

一、使用 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞