最近在做react項目的時候遇到了幾個報錯，這幾個報錯在react項目還算常見，因此記錄下來解決方法。

’type’ is missing in props validation

報錯：type缺少props驗證

解決：

1.查看下propTypes是否寫成大寫了，因為我們引入的時候是大寫的，所以很多小伙伴可能直接復制過來就成大寫了，也會報錯哦

2.新增type: PropTypes.number

import PropTypes from 'prop-types';
const ReportOperate = ({ logId, type }) => {
  return <>
    <a href='javascript:;' onClick={() => handleJump(record.logId, record.type)} style={{ color: '#1DA57A' }}>查看詳情</a>
    <a href={record.filePath} style={{ marginLeft: 20, color: '#1DA57A' }}>下載日志</a>
  </>
}
ReportOperate.propTypes = {
  logId: PropTypes.number,
  type: PropTypes.number,//加上這句就好了
}
export default ReportOperate

throw new Error(‘Cyclic dependency’ + nodeRep)

Error:Cyclic dependency

報錯： Webpack 循環(huán)依賴

解決：

npm i --save-dev html-webpack-plugin@next

Cannot destructure property getFieldDecorator of ‘undefined’ or ‘null’.

報錯： 無法破壞getFieldDecorator屬性undefine或null

解決：

1.是否沒有注入Form.create()

// 無狀態(tài)組件
export default Form.create()(SearchForm)

//有狀態(tài)組件
@Form.create()

Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {child}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Matchs.

報錯原因： 對數(shù)組進行map，然后取成了對象

解決：

1.map里面某一項取值是對象

Uncaught TypeError: Cannot read property ‘isSelectOptGroup’ of undefined

報錯原因： const Option = Select.option 引入ant design 的select錯誤

解決：

改成下面的

const { Option } = Select

VM38184:1 Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.

報錯原因： 缺少了dispatch

解決：

改成下面的

backend.js:6 ./src/pages/beach/containers/Reward.js

Module not found: Error: Can’t resolve ‘antd/es/descriptions’ in '/Users/chenjiaxin/bull/src/pages/beach/containers’

或者

Module not found: Can’t resolve 'antd/es/affix’

報錯原因：

在項目中使用了antd里面的Descriptions描述列表組件，發(fā)現(xiàn)報了這個錯誤，根本原因就是使用的antd版本里面沒有這個組件，項目中引用的antd版本是3.16.0，而我看的文檔版本已經(jīng)到了3.24.0了

解決： 將antd 版本更新到最新或者文檔里的版本

Uncaught TypeError: Cannot convert undefined or null to object

報錯原因： 由于undefined和null無法轉成對象，如果用Object.keys等操作的話需要加個對象作為初始值。

解決：

 const [firstResponsibility, setFirstResponsibility] = useState({})

Uncaught TypeError: Cannot read property ‘value’ of null

報錯原因： 涉及到React中的合成事件，debounce包裝后的回調函數(shù)，是個異步事件，即e.target為null了

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

解決：

//錯誤代碼
<Search
	addonBefore={prefixSelector}
    style={{ width: 250 }}
    allowClear
    onChange={debounce(e => {
    	console.log('e', e)
    	e.persist()
    	setSearchValue((e.target || {}).value)
    	handleChangeParams(searchId, (e.target || {}).value)
  	}, 1000)}
/>
 // 錯誤代碼，可以執(zhí)行，但是還是執(zhí)行多次，沒有起到防抖的效果
<Search
   addonBefore={prefixSelector}
   style={{ width: 250 }}
   allowClear
   onChange={e => {
     e.persist()
     debounce(() => {
       setSearchValue((e.target || {}).value)
       handleChangeParams(searchId, (e.target || {}).value)
     }, 2000)()
   }}
/>

// 正確代碼
<Search
    addonBefore={prefixSelector}
    style={{ width: 250 }}
    allowClear
    onChange={e => {
       e.persist()
       handleChangeValue(e)
     }}
/>
const handleChangeValue = debounce(e => {
    setSearchValue((e.target || {}).value)
    handleChangeParams(searchId, (e.target || {}).value)
  }, 1000)

vendor.js:1 Uncaught Error: Minified React error #306; visit https://reactjs.org/docs/error-decoder.html?invariant=306&args[]=()&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

報錯原因： 標簽內的onClick事件立刻執(zhí)行導致死循環(huán)，加載過多

解決：

// 錯誤代碼
<CommonTabBox onCallBack={setCurTab} />
// 正確代碼
 <CommonTabBox onCallBack={val => setCurTab(val)} />

無法使用 JSX，除非提供了 “–jsx” 標志

解決：

在vscode的setting.json中設置

 "typescript.tsdk": "node_modules\\typescript\\lib",

無法找到模塊“react/jsx-runtime”的聲明文件。

解決：

npm install -D @types/庫的名字

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論