最近、reactプロジェクトで作業しているときにいくつかのエラーが発生しました。これらのエラーは、reactプロジェクトではかなり一般的であるため、解決策を記録してください。
「タイプ」が小道具検証
レポートエラーにありません：タイプに小道具検証
ソリューションがありません：
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（ 'Cyclicdependency' + nodeRep）
エラー：循環依存
エラー： Webpack循環依存
解決：
npm i --save-dev html-webpack-plugin@next
getFieldDecorator'undefined 'または 'null 'のプロパティを分解できません。
エラー： getFieldDecoratorプロパティundefineまたはnullを破棄できません
解決策：
1。Form.create（）へのインジェクションがないかどうか
// 无状态组件
export default Form.create()(SearchForm)
//有状态组件
@Form.create()
キャッチされないエラー：不変の違反：オブジェクトはReactの子として無効です（見つかった：キー{child}のオブジェクト）。子のコレクションをレンダリングする場合は、代わりに配列を使用するか、からcreateFragment（object）を使用してオブジェクトをラップします。アドオンを反応させます。Matchesのrenderメソッドを確認します。
エラーの理由：配列をマップしてから、オブジェクトを取得して
解決します
。1。マップ内の値はオブジェクトです。
Uncaught TypeError：undefinedのプロパティ「isSelectOptGroup」を読み取れません
理由： const Option = Select.option antデザインの選択エラーが発生しました
解決策：
次のように変更してください
const { Option } = Select
VM38184：1 Uncaught（in promise）エラー：アクションはプレーンオブジェクトである必要があります。非同期アクションにはカスタムミドルウェアを使用してください。
エラーの理由：ディスパッチ
ソリューションがありません：
次のように変更してください
// 错误示范：
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
モジュールが見つかりません：エラー： '/ Users / chenjiaxin / bull / src / pages / beach /の' antd / es / descriptions 'を解決できませんコンテナ
または
モジュールが見つかりません：「antd / es / affix」
エラーの理由を解決できません：antd
の説明説明リストコンポーネントがプロジェクトで使用され、このエラーが報告されたことが判明しました。根本的な原因は、使用されたantdバージョンにはこのコンポーネントがなく、プロジェクトで参照されているantdバージョンは3.16.0であり、私が読んだドキュメントバージョンは3.24.0に達しました。
解決策： antdバージョンを最新またはドキュメント内のバージョンに更新します。
Uncaught TypeError：undefinedまたはnullをオブジェクトに変換できません
エラー： undefinedおよびnullはオブジェクトに変換できないため、Object.keysおよびその他の操作を使用する場合は、オブジェクトを初期値として追加する必要があります。
解決する：
const [firstResponsibility, setFirstResponsibility] = useState({
})
この合成イベントは、パフォーマンス上の理由で再利用されます。これが表示されている場合targetは、リリース/無効化された合成イベントでプロパティにアクセスしています。これはnullに設定されます。元の合成イベントを保持する必要がある場合は、event.persist（）を使用してください。詳細については、https：//fb.me/react-event-poolingを参照してください。
Uncaught TypeError：nullのプロパティ 'value'を読み取れません
エラーの理由： Reactの合成イベントが関係しています。debounceでラップされたコールバック関数は非同期イベントです。つまり、e.targetはnullです。
SyntheticEventはプールされます。これは、イベントコールバックが呼び出された後、SyntheticEventオブジェクトが再利用され、すべてのプロパティが無効になることを意味します。これはパフォーマンス上の理由によるものです。そのため、非同期でイベントにアクセスすることはできません。
解決する：
//错误代码
<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; 完全なメッセージについてはhttps://reactjs.org/docs/error-decoder.html?invariant=306&args[]=()&args[]=にアクセスするか、完全なエラーと追加の役立つ警告については縮小されていない開発環境を使用してください。