Recently, I encountered several errors when working on the react project. These errors are quite common in the react project, so record the solution.
'type' is missing in props validation
report error : type lacks props validation
solution:
1. Check whether propTypes is written in uppercase, because we introduced it in uppercase, so many small partners may directly copy it and make it in uppercase. Report an error
2. Newtype: 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
report error: Webpack cyclic dependency
resolution:
npm i --save-dev html-webpack-plugin@next
Cannot destructure propertygetFieldDecorator of'undefined' or'null '.
Error: Unable to destroy the getFieldDecorator property undefine or null
Solution:
1. Whether there is no injection into Form.create()
// 无状态组件
export default Form.create()(SearchForm)
//有状态组件
@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.
Reason for error: Map the array, and then take the object to
solve:
1. A value in the map is an object
Uncaught TypeError: Cannot read property'isSelectOptGroup' of undefined
Error report reason: const Option = Select.option Introduce the select error of ant design
Solution:
Change to the following
const { Option } = Select
VM38184:1 Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.
Reason for error: missing dispatch
solution:
change to the following
// 错误示范：
remove: params => {
const { contentId } = params
return post('/content/topic/deleteBxTopic', { id: contentId }).then(result => {
if (result) {
Message.success('删除成功')
}
})
},
// 正确示范：
remove: params => dispatch => {
const { contentId } = params
return post('/content/topic/deleteBxTopic', { id: contentId }).then(result => {
if (result) {
Message.success('删除成功')
}
})
},
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'
or
Module not found: Can't resolve'antd/es/affix'
error reason:
The Descriptions description list component in antd was used in the project, and it was found that this error was reported. The root cause was that the antd version used did not have this Component, the antd version referenced in the project is 3.16.0, and the document version I read has reached 3.24.0.
Solution: Update the antd version to the latest or the version in the document
Uncaught TypeError: Cannot convert undefined or null to object
Error: Because undefined and null cannot be converted into objects, if you use Object.keys and other operations, you need to add an object as the initial value.
solve:
const [firstResponsibility, setFirstResponsibility] = useState({
})
This synthetic event is reused for performance reasons. If you’re seeing this, you’re accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.
Uncaught TypeError: Cannot read property ‘value’ of null
Reason for error: Involving synthetic events in React, the callback function wrapped by debounce is an asynchronous event, that is, e.target is 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.
solve:
//错误代码
<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)}
/>
// 错误代码，可以执行，但是还是执行多次，没有起到防抖的效果
<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.