React: استدعاء ربط غير صالح. لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة. قد يحدث هذا لأحد الأسباب التالية:

تم إنشاؤها على ٤ أبريل ٢٠١٩ · 61تعليقات · مصدر: facebook/react

مرحبًا بالجميع ، أنا جديد في الرد وأحاول إنشاء مكتبة تفاعل من المكونات REACT HOOKS .

إخلاء المسؤولية: هذه هي المرة الأولى التي أقوم فيها بإنشاء مشكلة ، لذا يرجى الانتظار معي.

لذلك أحاول إنشاء مكون أكورديون يقوم بالتبديل بين هذه الفئات accordion__item--open و accordion__item للفتح والإغلاق.

package.json

{
  "name": "react-lib",
  "version": "0.3.0",
  "description": "A simple UI library of react components",
  "main": "dist/index.js",
  "publishConfig": {
    "registry": ""
  },
  "scripts": {
    "login": "",
    "build": "webpack --mode=production",
    "develop": "webpack --mode=development --watch"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "",
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "eslint": "^5.15.1",
    "eslint-loader": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.6.0"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports =  {

  mode: 'development',
  optimization: {
    minimize: true,
  },
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js',
    library: '',
    libraryTarget: 'commonjs'
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/react']
        }
      }
    ]
  } 
};

هذه هي حاوية الأكورديون:

""
استيراد رد فعل من "رد فعل" ؛

وظيفة الأكورديون ({الأطفال}) {

إرجاع (

{ الأطفال }

) ؛

}

تصدير الأكورديون الافتراضي ؛

**This is the accordion item that will live inside the container:**

استيراد React ، {useState} من "رد فعل" ؛

الوظيفة AccordionItem ({header، content}) {

const [isActive، toggleActive] = useState (false) ؛

إرجاع (

الأكورديون__item $ {هو نشط؟ 'أكورديون__item - فتح': ''}}>

  <button
    className="accordion__item-header"
    onClick={ () => isActive ? toggleActive(false) : toggleActive(true) }
  >
   { header }
   <svg className="icon icon--debit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
     <path className="icon__path" d="M22.37,22.33V2.67a2.63,2.63,0,0,1,5.26,0V47.24a2.63,2.63,0,0,1-5.26.09V27.58H2.71a2.63,2.63,0,0,1,0-5.25Zm11.92,5.25a2.63,2.63,0,0,1,0-5.25h13a2.63,2.63,0,0,1,0,5.25Z">
     </path>
   </svg>
 </button>

 <div className="accordion__item-content">
   { children }
 </div>

)

} ؛

تصدير الأكورديون الافتراضي ؛

Now inside of a [create-react-app](https://github.com/sethandleah/myapp) I import these components

My [library](https://github.com/sethandleah/react-lib) and the [create-react-app](https://github.com/sethandleah/myapp) are relative to each other and I am using ```npm link```

استيراد رد فعل من "رد فعل" ؛

استيراد {AccordionItem} من "رد فعل ليب"
استيراد {الأكورديون} من "رد فعل ليب" ؛

وظيفة التطبيق ({الدعائم}) {

إرجاع (

  <Accordion>
    <AccordionItem header={"Hello"} content={"World"}/>
  </Accordion>

)

}

تصدير التطبيق الافتراضي ؛

I have followed all of these [instructions](https://reactjs.org/warnings/invalid-hook-call-warning.html) and I still get the same error.


**Current behavior?**

استدعاء ربط غير صالح. لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة. قد يحدث هذا لأحد الأسباب التالية:

قد يكون لديك إصدارات غير متطابقة من React والعارض (مثل React DOM)
ربما تكون قد انتهكت قواعد الخطافات
قد يكون لديك أكثر من نسخة واحدة من React في نفس التطبيق
راجع https://fb.me/react-invalid-hook-call للحصول على نصائح حول كيفية تصحيح هذه المشكلة وحلها.

**Steps to reproduce**

- clone [https://github.com/sethandleah/react-lib](https://github.com/sethandleah/react-lib)
- clone [https://github.com/sethandleah/myapp](https://github.com/sethandleah/myapp)
- ```cd react-lib```
- ```npm install```
- ```npm link```
- ```cd ../myapp```
- ```npm i```
- ```npm link react-lib```
- ```npm start```

**Expected behavior**

- It should show a button with a "plus" svg sign and the words "Hello" and "World" respectively
- Open devtools and go to elements
- When clicking on the button the class ```accordion_item--open``` should toggle

**To see the above, do the following:**

- Uncomment these lines at ```myapp/src/App.js```

استيراد الأكورديون من "./Accordion" ؛
استيراد AccordionItem من "./AccordionItem" ؛

- The comment out these line, alse at ```myapp/src/App.js```:

استيراد {الأكورديون} من "رد فعل ليب" ؛
استيراد {AccordionItem} من "رد فعل ليب" ؛
""

تتأثر إصدارات React و Browser / OS بهذه المشكلة:

React و React-Dom: كلاهما ^16.8.6 على كل من رد فعل- lib و myapp
المتصفح: Brave Version 0.61.52 Chromium: 73.0.3683.86 (Official Build) (64-bit)
نظام التشغيل: MacOS High Siera Version 10.13.6 (17G5019)

Needs Investigation

مصدر

sethandleah

👍56 ❤2

التعليق الأكثر فائدة

مكتبتي وتطبيق create-reaction-app متعلقان ببعضهما البعض وأنا أستخدم رابط npm

هل قرأت هذا الجزء؟

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react

يعالج مباشرة سير العمل link :

Screen Shot 2019-04-04 at 09 28 47

gaearon في ٤ أبريل ٢٠١٩

👍114 🎉27 🚀20 👎20 😕15 ❤12 👀5 😄3

ال 61 كومينتر

أعتقد أنك تواجه نفس المشكلة التي يواجهها الأشخاص في https://github.com/facebook/react/issues/13991 هل يمكنك إلقاء نظرة على بعض الحلول المقدمة في الجزء السفلي من المشكلة والاطلاع عليها اعمل لاجلك؟

threepointone في ٤ أبريل ٢٠١٩

👍1

يحدث هذا إذا استخدمت خطافًا داخل المكوّن الأعلى ترتيبًا.

const HOC = Component => {
  return (props) => {
    const [val] = useState();
    return <div>{val}</div>
  }
}

revskill10 في ٤ أبريل ٢٠١٩

👍62 ❤4 🎉1

@ revskill10 من فضلك قم بعمل مشكلة منفصلة مع codeandbox repro.

threepointone في ٤ أبريل ٢٠١٩

سأوصي باستخدام

يحدث أننا غالبًا ما نسينا ربط رد الفعل ورد الفعل بالتطبيق الأبوي في حالة المكتبات التي تضيف بنائين من التفاعل وتؤدي إلى هذه المشكلة.

إذا كان هذا هو الحال من مجرد رابط npm يتفاعل ويتفاعل مع الإصدار الأصلي من رد فعل ورد فعل دوم.

iAmServerless في ٤ أبريل ٢٠١٩

مكتبتي وتطبيق create-reaction-app متعلقان ببعضهما البعض وأنا أستخدم رابط npm

هل قرأت هذا الجزء؟

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react

يعالج مباشرة سير العمل link :

Screen Shot 2019-04-04 at 09 28 47

gaearon في ٤ أبريل ٢٠١٩

👍114 🎉27 🚀20 👎20 😕15 ❤12 👀5 😄3

(يُرجى إعلامي إذا لم يساعد ذلك ويمكننا إعادة الفتح. أنا أقدر الكتابة المفصلة.)

gaearon في ٤ أبريل ٢٠١٩

شكرًا لكم جميعًا على المشاركة

gaearon لقد حاولت بالفعل

لقد اتبعت كل هذه التعليمات وما زلت أتلقى نفس الخطأ.

threepointone مضحك بما يكفي ، لقد وجد الكثير من الناس حلولًا لهذا في # 13991 وقد أمضيت بقية الأمس في تنفيذها دون نجاح.

sethandleah في ٥ أبريل ٢٠١٩

حسنًا ، إذا لم يساعد ذلك ، فلنتركه مفتوحًا حتى يتمكن شخص ما من تصحيح مشكلتك ومساعدتك. المشكلة _ هي نفسها (الطريقة التي تربط بها الحزم تؤدي إلى تكرارها في الحزمة) لكنني لست متأكدًا من سبب عدم نجاح الاقتراح معك.

gaearon في ٥ أبريل ٢٠١٩

gaearon يمكنك الآن إغلاقه ،

sethandleah في ٧ أبريل ٢٠١٩

أنا فقط أسمي الخطاف بطريقة أساسية للغاية.

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

function App() {
const [number, setNumber] = useState(0);
const increase = () => {
    setNumber(number+1);
}
return <div>
<span>Counting: {number}</span>
<button onClick={increase} >Increase</button>
</div>
}

const selector = document.getElementById('app');

ReactDOM.render(<App />, selector);

أحصل على خطأ
Hooks can only be called inside of the body of a function component.
لقد أنشأت الكثير من مشروع التفاعل من الرسم ولكني لم أحصل على هذا الخطأ من قبل.
أنا أفهم كل قواعد الخطاف.
أقضي وقتًا لمدة 12 ساعة لتصحيح الأخطاء وحلها ، لكن للأسف لا يمكنني ذلك ، الآن ليس لدي أي فكرة.

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // I get true

worapolburaphan في ٨ مايو ٢٠١٩

👍20 ❤1

xeastcrast هل تمكنت من حل المشكلة؟

carlosriveros في ٢٩ مايو ٢٠١٩

تضمين التغريدة
حالة 1:
يمكنك التحقق من ملف index.html الذي يحتوي على حزمة علامات نصية واحدة فقط

إذا حصلت على نفس الخطأ بعد التحقق من index.html
الحالة 2:
إذا كنت تستخدم Webpack html ، فإن خاصية In plugins داخل ملف webpack.config
وليس لديك {رفض: صحيح} في خيار HTMLWebpackPlugin () الجديد ؛

يجب عليك إزالة علامة البرنامج النصي التي تحتوي على src من مجموعتك في index.html

لأن HTMLWebpackPlug سيضيف علامة البرنامج النصي التي تتضمن ملف الحزمة تلقائيًا.

worapolburaphan في ٣٠ مايو ٢٠١٩

👍13 ❤6 🎉6 🚀4 😄4

مرحبًا ، أنا جديد في React Hooks. لقد استخدمت للتو Material-UI لإنشاء شريط البحث في مشروعي. لقد كتبت هذا الرمز ، لكن هذا لا يعمل ويعطي نفس المشكلة. قرأت مستندات React Hooks ولكن لم أحصل على أي شيء بخصوص ذلك.
كود ردود الفعل
"استيراد رد فعل من رد فعل" ؛
استيراد {makeStyles} من "@ material-ui / core / styles" ؛
استيراد الورق من "@ material-ui / core / Paper" ؛
استيراد InputBase من "@ material-ui / core / InputBase" ؛
استيراد IconButton من "@ material-ui / core / IconButton" ؛
استيراد SearchIcon من "@ material-ui / icons / Search" ؛

const useStyles = makeStyles ({
جذر: {
المساحة المتروكة: "2 بكسل 4 بكسل" ،
عرض: "فليكس" ،
محاذاة العناصر: "مركز" ،
العرض: 400 ،
} ،
إدخال: {
الهامش الأيسر: 8 ،
المرن: 1 ،
} ،
iconButton: {
الحشو: 10 ،
} ،
الحاجز: {
العرض: 1 ،
الارتفاع: 28 ،
الهامش: 4 ،
} ،
}) ؛

الوظيفة الميزة () {
فئات const = useStyles () ؛

إرجاع (

) ؛
}

تصدير الميزة الافتراضية ؛

**PACKAGE.JSON**
```{
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

إصدار

العقدة - v10.15.3
رد فعل - ^ 16.8.5
واجهة المستخدم المادية - ^ 4.0.1

نتيجة متوقعة

مدمج VS CODE والمتوقع _A search bar_
انتاج
_TypeError: الكائن (...) ليس دالة_
_ غير صالح ربط المكالمة. لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة. يمكن أن يحدث هذا لأحد الأسباب التالية: _

محاولة
_حاول التشغيل في CODESANDBOX ، كل شيء يعمل بشكل جيد _

B4BIPIN في ٢ يونيو ٢٠١٩

👍3

مرحبًا ، أنا جديد في React Hooks. لقد استخدمت للتو Material-UI لإنشاء شريط البحث في مشروعي. لقد كتبت هذا الرمز ، لكن هذا لا يعمل ويعطي نفس المشكلة. قرأت مستندات React Hooks ولكن لم أحصل على أي شيء بخصوص ذلك.
كود ردود الفعل
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import InputBase from '@material-ui/core/InputBase';
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';

const useStyles = makeStyles({
  root: {
    padding: '2px 4px',
    display: 'flex',
    alignItems: 'center',
    width: 400,
  },
  input: {
    marginLeft: 8,
    flex: 1,
  },
  iconButton: {
    padding: 10,
  },
  divider: {
    width: 1,
    height: 28,
    margin: 4,
  },
});

function Feature() {
    const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <InputBase className={classes.input} placeholder="Search Google Maps" />
      <IconButton className={classes.iconButton} aria-label="Search">
        <SearchIcon />
      </IconButton>
    </Paper>
  );
}

export default Feature;
الحزمة. JSON
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}
إصدار
العقدة - v10.15.3
رد فعل - ^ 16.8.5
واجهة المستخدم المادية - ^ 4.0.1
نتيجة متوقعة
مدمج VS CODE والمتوقع _A search bar_
انتاج
_TypeError: الكائن (...) ليس دالة_
_ غير صالح ربط المكالمة. لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة. يمكن أن يحدث هذا لأحد الأسباب التالية: _
محاولة
_حاول التشغيل في CODESANDBOX ، كل شيء يعمل بشكل جيد _

أواجه هذا السؤال أيضًا عند استخدام واجهة المستخدم المادية.

stupidsongshu في ٣ يونيو ٢٠١٩

stupidsongshu ، فكيف حللت ذلك؟

B4BIPIN في ٧ يونيو ٢٠١٩

مرحبًا ، أنا جديد في React Hooks. لقد استخدمت للتو Material-UI لإنشاء شريط البحث في مشروعي. لقد كتبت هذا الرمز ، لكن هذا لا يعمل ويعطي نفس المشكلة. قرأت مستندات React Hooks ولكن لم أحصل على أي شيء بخصوص ذلك.
كود ردود الفعل
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import InputBase from '@material-ui/core/InputBase';
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';

const useStyles = makeStyles({
  root: {
    padding: '2px 4px',
    display: 'flex',
    alignItems: 'center',
    width: 400,
  },
  input: {
    marginLeft: 8,
    flex: 1,
  },
  iconButton: {
    padding: 10,
  },
  divider: {
    width: 1,
    height: 28,
    margin: 4,
  },
});

function Feature() {
    const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <InputBase className={classes.input} placeholder="Search Google Maps" />
      <IconButton className={classes.iconButton} aria-label="Search">
        <SearchIcon />
      </IconButton>
    </Paper>
  );
}

export default Feature;
الحزمة. JSON
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}
إصدار
العقدة - v10.15.3
رد فعل - ^ 16.8.5
واجهة المستخدم المادية - ^ 4.0.1
نتيجة متوقعة
مدمج VS CODE والمتوقع _A search bar_
انتاج
_TypeError: الكائن (...) ليس دالة_
_ غير صالح ربط المكالمة. لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة. يمكن أن يحدث هذا لأحد الأسباب التالية: _
محاولة
_حاول التشغيل في CODESANDBOX ، كل شيء يعمل بشكل جيد _

حدث هذا لي اليوم وقمت بتشغيل تثبيت npm - حفظ

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react

vcibel في ٧ يونيو ٢٠١٩

❤1

لقد اتبعت الإرشادات الواردة في صفحة المساعدة ولكنها لم تحل المشكلة بعد

miguelmota في ١٢ يونيو ٢٠١٩

👍2

بالنسبة لي ، لقد حللناها في الوقت الحالي ببساطة عن طريق تمرير React كدعم. هذا تطبيق ووحدات منفصلة نتمتع بالتحكم الكامل فيها ، لذلك لا أعرف ما إذا كان ينطبق على الجميع.

mikeaustin في ٢٢ يونيو ٢٠١٩

لم يساعدني ذلك أيضًا ..
استخدام React & React-DOM = 16.8.0 و Material-UI = 4.1.3

Barathwaja في ٢٦ يونيو ٢٠١٩

لقد كنت أختبر جميع الحلول حول مشكلة الخطافات هذه ، أي استيراد لمكون من lib خارجي باستخدام الخطافات سيتعطل نظرًا لوجود حالتين من ردود الفعل (واحدة من lib ، وواحدة من تطبيقي).

لقد اتبعت جميع الاقتراحات ، ولم يعمل شيء حتى الآن. سأصنع مكونًا بحالة حتى يتم توضيحه بشكل أكبر ...

tquiroga في ٣ يوليو ٢٠١٩

😕4

نفس المشكلة هنا. لدينا مشروع مع حالتين من ردود الفعل. واحد مثل lib وواحد app يستهلك lib .

dude-awesome في ١٠ يوليو ٢٠١٩

لقد قمت بحل المشكلة بإزالة yarn.lock ، package-lock.json ، node_modules ، dist ، نوع ذاكرة التخزين المؤقت وملفات الإنشاء ، ثم تشغيل yarn أو npm install لتثبيت المكتبات مرة أخرى. الآن يعمل!

gtgalone في ١٠ يوليو ٢٠١٩

👍3

أنا حل هذا عن طريق التغيير

                <Route key={index} render={route.component} path={route.path} />

إلى

                <Route key={index} component={route.component} path={route.path} />

لكني لا أعرف لماذا :(

xyj404 في ١٢ يوليو ٢٠١٩

👍24 🎉10 ❤7

تم إصلاحه باستخدام مكون بدلاً من التقديم عن طريق الخطأ. لم يذكر الدليل الرسمي هذا السيناريو.
شكرا ، xyj404
<Route path="/login" exact component={LoginForm} />

MikeQin في ٣٠ يوليو ٢٠١٩

👍10

كان لدي نفس المشكلة ولكن السبب كان مختلفًا. بالنسبة لأي شخص يستخدم مكونات إضافية أو مقتطفات للاستيراد التلقائي ، تأكد من الاستيراد من نفس الحالة.

إذا كان لديك مزيج من import {useEffect} from 'react' و import {useEffect} from 'React' فستواجه هذه المشكلة.

raza-jamil-harvest في ١٦ أغسطس ٢٠١٩

🎉1 👍1

لدي أيضًا هذه المشكلة ، على الرغم من أن كل شيء يعمل بشكل جيد بالنسبة لي في القصص القصيرة ، ولكن عند استخدامه في التطبيق فإنه يعطي نفس الخطأ

AnimeManna في ١٦ أغسطس ٢٠١٩

نفس المشكلة تعمل أيضا
جيد في القصص القصيرة ، ولكن استخدام التطبيق يلقي هذا الخطأ

hugo-integrate في ١٦ أغسطس ٢٠١٩

نفس الخطأ ، أحصل عليه عند تشغيل npm test لكن التطبيق يعمل بشكل جيد.
ها هي package.json ، هل من اقتراحات؟ أنا عالق حقًا وأضيع الوقت في التعامل مع هذا الخطأ

{
  "name": "myproject",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/moment": "1.0.1",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.1",
    "animate.css": "^3.7.0",
    "aws-amplify": "^0.4.8",
    "aws-amplify-react": "^0.1.54",
    "axios": "^0.18.0",
    "file-saver": "^2.0.0",
    "ics-js": "^0.10.2",
    "material-ui-pickers": "2.1.1",
    "moment": "^2.23.0",
    "normalize.css": "^8.0.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.0",
    "react-date-range": "^1.0.0-beta",
    "react-dom": "^16.8.6",
    "react-google-maps": "^9.4.5",
    "react-jss": "^8.6.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.1",
    "recharts": "^1.3.5",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0",
    "sweetalert2": "^7.33.1",
    "sweetalert2-react-content": "^1.0.1"
  },
  "scripts": {
    "start:dev": "node  -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/development.env",
    "start:stage": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/stage.env",
    "start:prod": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/production.env",
    "build:stage": "node --max_old_space_size=2048 --max_old_space_size=1024 -r dotenv/config ./node_modules/.bin/react-scripts build dotenv_config_path=./env/stage.env",
    "build:dev": "node --max_old_space_size=2048 -r dotenv/config ./node_modules/react-scripts/bin/react-scripts build dotenv_config_path=./env/development.env",
    "build:prod": "node --max_old_space_size=2048 -r dotenv/config ./node_modules/react-scripts/bin/react-scripts build dotenv_config_path=./env/production.env",
    "test": "node -r dotenv/config ./node_modules/.bin/react-scripts test dotenv_config_path=./env/development.env --runInBand",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.0.0",
    "@testing-library/react": "^8.0.5",
    "@testing-library/react-hooks": "^1.1.0",
    "dotenv": "^6.0.0",
    "prettier": "^1.15.3",
    "react-test-renderer": "^16.8.6"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

simonepizzamiglio في ٢٠ أغسطس ٢٠١٩

انتقل إلى هذا الموقف أيضًا باستخدام رد فعل وتفاعل dom كلا الإصدارين 16.8.6 ، باستخدام الخطاف makeStyles من @material-ui/core في تطبيق منفصل مرتبط باستخدام رابط npm.

بعد ترقية التطبيق الرئيسي للتفاعل والتفاعل dom v16.9.0 ، وإعادة ربط التطبيق الذي كان يستخدم الخطافات التي تسبب المشكلة ، بدأ كل شيء في العمل مرة أخرى.

pmjonesg في ٢٢ أغسطس ٢٠١٩

نعم ، لقد واجهت نفس المشكلة عند استخدام @ material-ui. يستغرق الأمر مزيدًا من الوقت لمعرفة هذه المشكلة. ثم بحثت في google ووجدت حلاً لذلك. إنه هنا http://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component/

المنشور الأصلي:

عند البحث في بعض الأمثلة لكتابة كود واجهة المستخدم المادية داخل React واستخدام TypeScript (داخل ملف .tsx على وجه الدقة) ، قد تصادف خطأً في وقت التشغيل مثل "Invalid hook call. لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة ".

فيما يلي مثال على الكود الذي تسبب في حدوث هذا الخطأ

import React, { Component }  from "react";
import AddIcon from "@material-ui/icons/Add";
import { Fab } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
   fab: {
      margin: theme.spacing(1),
   },
}));

const classes = useStyles();

export default class SampleComponent extends Component<{}, {}> {
   public render() {
      return (
         <div>
            <Fab color="primary" aria-label="Add" className={classes.fab}><AddIcon /></Fab>
         </div>
       );
   }
}

ما علينا فعله هو لف كود useStyles في دالة واستبدال الكود الذي يستخدمه ، على سبيل المثال

const SampleFab = () => {
   const classes = useStyles();
   return <Fab color="primary" aria-label="Add" className={classes.fab}><AddIcon /></Fab>;
}

export default class SampleComponent extends Component<{}, {}> {
   public render() {
      return (
         <div>
            <SampleFab />
         </div>
      );
   }
}

يوضح هذا أيضًا كيف يمكننا إنشاء مكونات قابلة لإعادة الاستخدام من مجرد وظيفة بسيطة.

=> إنه مجنون ولكنه يعمل بشكل جيد. أتمنى أن يساعد هذا.

bachphuc في ٢٣ أغسطس ٢٠١٩

👍3

إذا كنت تستخدم lerna أو monorepo مثلي ، فقم بإضافة شيء مثل هذا إلى تهيئة حل Webpack

...
    alias: {
      'react-dom': 'path/to/main-package/node_modules/react-dom',
      react: 'path/to/main-package/form/node_modules/react',
    }
...

إذا كنت تحصل عليه في Storybook ، فأضفه إلى تهيئة Webpack المخصصة هناك أيضًا.

ملاحظة جانبية ، إذا كان هذا يعمل على إصلاح المشكلة بالنسبة لك ، فإن حزمة webpack المدمجة الخاصة بك تحتوي أيضًا على نسختين من التفاعل (استخدم شيئًا مثل محلل حزمة حزمة الويب لفحصها). في حالتي ، كان لديّ حزمة منفصلة في monorepo الخاصة بي والتي تهتم بالتجميع وجميع الأدوات لذلك اضطررت إلى إضافة اسم مستعار.

sourcesoft في ٢٣ أغسطس ٢٠١٩

👍2

إذا كنت تستخدم lerna أو monorepo مثلي ، فقم بإضافة شيء مثل هذا إلى تهيئة حل Webpack
...
    alias: {
      'react-dom': 'path/to/main-package/node_modules/react-dom',
      react: 'path/to/main-package/form/node_modules/react',
  }
...
إذا كنت تحصل عليه في Storybook ، فأضفه إلى تهيئة Webpack المخصصة هناك أيضًا.
ملاحظة جانبية ، إذا كان هذا يعمل على إصلاح المشكلة بالنسبة لك ، فإن حزمة webpack المدمجة الخاصة بك تحتوي أيضًا على نسختين من التفاعل (استخدم شيئًا مثل محلل حزمة حزمة الويب لفحصها). في حالتي ، كان لديّ حزمة منفصلة في monorepo الخاصة بي والتي تهتم بالتجميع وجميع الأدوات لذلك اضطررت إلى إضافة اسم مستعار.

شكرًا لك ، لقد حل هذا مشكلتي ، لقد قمت بتثبيت React آخر في دكتوري docs ، والذي تسبب في حدوث هذه المشكلة.

mysteryven في ٣ سبتمبر ٢٠١٩

أنا فقط أسمي الخطاف بطريقة أساسية للغاية.
import React, {useState} from 'react'
import ReactDOM from 'react-dom'

function App() {
const [number, setNumber] = useState(0);
const increase = () => {
    setNumber(number+1);
}
return <div>
<span>Counting: {number}</span>
<button onClick={increase} >Increase</button>
</div>
}

const selector = document.getElementById('app');

ReactDOM.render(<App />, selector);
أحصل على خطأ
Hooks can only be called inside of the body of a function component.
لقد أنشأت الكثير من مشروع التفاعل من الرسم ولكني لم أحصل على هذا الخطأ من قبل.
أنا أفهم كل قواعد الخطاف.
أقضي وقتًا لمدة 12 ساعة لتصحيح الأخطاء وحلها ، لكن للأسف لا يمكنني ذلك ، الآن ليس لدي أي فكرة.
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // I get true

قد يكون لديك إصدارات غير متطابقة من React و React DOM.
لقد تم حل المشكلة نفسها عن طريق إجراء تغيير في إصدار React

jafartke في ١١ سبتمبر ٢٠١٩

👎3

لقد واجهت هذه المشكلة عندما أحاول تغيير المكون الخاص بي من مكون وظيفي إلى مكون classfull وأحصل أيضًا على هذا الخطأ ، لذا إليك الحل فيما يتعلق بهذا الخطأ ، آمل أن يساعد في حالتك أيضًا.

حاول استخدام مكون عالي المستوى في هذه الحالة

استيراد رد فعل من "رد فعل" ؛
استيراد PropTypes من "أنواع العناصر" ؛
استيراد {withStyles} من "@ material-ui / styles" ؛
زر استيراد من "@ material-ui / core / Button" ؛

أنماط const = موضوع => ({
جذر: {
الخلفية: "تدرج خطي (45 درجة ، # FE6B8B 30٪ ، # FF8E53 90٪)" ،
الحد: 0 ،
راديوس: 3 ،
boxShadow: "0 3px 5px 2px rgba (255، 105، 135، .3)" ،
اللون الابيض'،
الارتفاع: 48 ،
المساحة المتروكة: "0 30 بكسل" ،
} ،
}) ؛

تمدد فئة HigherOrderComponent تمديد React.Component {

يقدم - يجعل(){
const {class} = this.props؛
إرجاع (

HigherOrderComponent.propTypes = {
الفئات: PropTypes.object.isRequired ،
} ؛

تصدير افتراضي مع أنماط (أنماط) (HigherOrderComponent) ؛

abdulmoizshaikh في ٢٠ سبتمبر ٢٠١٩

أنا أتعلم React و FWIW ، لقد رأيت أيضًا المشكلة عند محاولة تقديم التطبيق () مثل هذا:

ReactDOM.render(App(), $("#root"));

كان تفكيري هو أن <App /> سينشئ بشكل ضمني نموذجًا صغيرًا فقط لإدراج مكون التطبيق ، لذلك بدلاً من ذلك اتصلت بالتطبيق مباشرةً ، والذي يعرض نموذج JSX.

ومع ذلك ، بمجرد أن بدأت في استخدام setState () ، تسببت في المشكلة المذكورة أعلاه. التغيير إلى <App /> حل هذا.

ReactDOM.render(<App />, $("#root"));

ملاحظة: $ هو مجرد مساعد const $ = sel => document.querySelector(sel);

fabd في ٩ أكتوبر ٢٠١٩

بالنسبة لأولئك الذين لا يزالون يواجهون هذا الخطأ بعد استكشاف أخطاء جميع الإصلاحات المقترحة وإصلاحها ، تحقق جيدًا من أنك تستخدم غلاف الدليل الصحيح عند تشغيل مشروعك. استمرت المشاكل على جهاز الكمبيوتر واكتشفت أن هذا هو السبب.

https://stackoverflow.com/questions/58365151/hooks-error-invalid-hook-call-using-nextjs-or-reactjs-on-windows

dbeaudway في ١٣ أكتوبر ٢٠١٩

لقد تلقيت هذا الخطأ عند تشغيل الاختبار بعد تحديث react-dom إلى الإصدار 16.10.2 . ترقية enzyme-adapter-react-16 إلى الإصدار 1.15.1 إصلاحه

joselcc في ١٧ أكتوبر ٢٠١٩

يا رجل أنا على رد الفعل v16.10.2. لقد أمضيت بالفعل ساعتين في محاربة هذا ، لكنني لن أواصل هذه المعركة بعد الآن لأن لدي أشياء أكثر أهمية لأفعلها. أنا موافق على البقاء في شكل رد الفعل النهائي 4.1.0 في الوقت الحالي. يا له من إحباط.

rockneverdies55 في ١٨ أكتوبر ٢٠١٩

هذا حل مشكلتي:

https://github.com/facebook/create-react-app/issues/7676#issuecomment -531543375

DanielAllt في ٦ نوفمبر ٢٠١٩

لقد واجهت نفس المشكلة الآن فقط بعد ترقية التبعيات وقضيت ساعات في محاولة حل هذه المشكلة.

أظهر npm ls react ما يلي:

├─┬ @storybook/[email protected]
│ └── [email protected]
└── [email protected]

أدى تثبيت react و react-dom إلى 16.9.0 إلى إزالة الخطأ لأنه جعل التبعية العابرة تختفي. اعتقدت في البداية أن هذا يعني وجود انحدار في 16.10.0 حتى لاحظت حدوث المشكلة أيضًا في 16.8.6 (لأن التبعية العابرة كانت مثبتة على ما يبدو).

تبين أن حقل الغزل

أفكر الآن في إسقاط @storybook/addon-info تمامًا لأنه يعتمد أيضًا على تبعية أخرى تعتمد على React 0.14 (نعم) ، على الرغم من أن هذا بطريقة ما لم يسبب مشاكل بعد.

تحرير: للتسجيل ، قضيت حوالي أربع ساعات في هذا لأنني لم أستطع الحصول على resolutions لإزالة النسخة المكررة ورفضت تصديق أن نسخة React قد دخلت الحزمة. لا تكن مثلي. قم بإلغاء تكرار ردود أفعالك العابرة.

pluma في ١٩ نوفمبر ٢٠١٩

يحدث هذا إذا استخدمت خطافًا داخل المكوّن الأعلى ترتيبًا.
const HOC = Component => {
  return (props) => {
    const [val] = useState();
    return <div>{val}</div>
  }
}

انا ايضا اواجه نفس المشكلة.

https://stackoverflow.com/questions/59173968/react-error-hooks-can-only-be-called-inside-the-body-of-a-function-component؟noredirect=1#comment104570333_59173968

هل يمكنك أن ترشدنى من فضلك ؟

Neeraj-swarnkar في ٤ ديسمبر ٢٠١٩

👍5

@ Neeraj-swarnkar حاول تقليل مشكلتك إلى مثال بسيط لا يزال يؤدي إلى الخطأ.

غالبًا ما يتلخص الأمر في إحدى مشكلتين:

تعتقد أنك تقوم بتمرير مكون ولكنه في الواقع خاصية تصيير (على سبيل المثال ، يتم استدعاء "المكون" كدالة ، وليس مكونًا)
لقد جمعت بطريقة ما أكثر من إصدار واحد من React عبر تبعياتك العابرة وخطوا على أصابع قدم بعضهم البعض

للأسف ، تميل تتبعات المكدس إلى أن تكون مضللة في هذه الحالة ، لكن رسائل الخطأ عمومًا تمنحك الفكرة الصحيحة.

pluma في ٤ ديسمبر ٢٠١٩

@ Neeraj-swarnkar حاول تقليل مشكلتك إلى مثال بسيط لا يزال يؤدي إلى الخطأ.
غالبًا ما يتلخص الأمر في إحدى مشكلتين:
تعتقد أنك تقوم بتمرير مكون ولكنه في الواقع خاصية تصيير (على سبيل المثال ، يتم استدعاء "المكون" كدالة ، وليس مكونًا)
لقد جمعت بطريقة ما أكثر من إصدار واحد من React عبر تبعياتك العابرة وخطوا على أصابع قدم بعضهم البعض
للأسف ، تميل تتبعات المكدس إلى أن تكون مضللة في هذه الحالة ، لكن رسائل الخطأ عمومًا تمنحك الفكرة الصحيحة.

شكرًا على المؤشر ، هل يمكنك إرشادي ما الذي يمكن عمله بشكل أفضل أو ما الذي يجب علي فعله لإصلاح ذلك؟

Neeraj-swarnkar في ٤ ديسمبر ٢٠١٩

@ Neeraj-swarnkar حاول التعليق على الكود واستبداله بعناصر نائبة حتى يكون لديك مثال بسيط لا يزال يؤدي إلى نفس الخطأ.

إذا لم يكن لديك زميل أو نظير ، فيمكنك أن تطلب مساعدتك في تصحيح هذا الأمر بشكل أكبر ، ومعرفة ما إذا كان يمكنك العثور على لقاء محلي أو مجموعة دراسة أو شركة تفتح ساعات العمل واطلب منهم المساعدة. إذا فشل كل شيء آخر ، فقم بتعيين شخص ما للنظر في الأمر نيابة عنك.

pluma في ٦ ديسمبر ٢٠١٩

مكتبتي وتطبيق create-reaction-app متعلقان ببعضهما البعض وأنا أستخدم رابط npm
هل قرأت هذا الجزء؟
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react
يعالج مباشرة سير العمل link :

هذا العمل مثل السحر!

ladifire في ٣٠ ديسمبر ٢٠١٩

مكتبتي وتطبيق create-reaction-app متعلقان ببعضهما البعض وأنا أستخدم رابط npm
هل قرأت هذا الجزء؟
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react
يعالج مباشرة سير العمل link :

هذا العمل مثل السحر!

ladifire في ٣٠ ديسمبر ٢٠١٩

لقد قمت بحل هذه المشكلة بالأمس ، لقد أزعجتني لمدة نصف شهر. بالأمس قمت باختصار الرمز إلى القليل جدًا (فقط أضف

ZeldaYuan في ١٤ يناير ٢٠٢٠

أنا حل هذا عن طريق التغيير

                <Route key={index} render={route.component} path={route.path} />

إلى

                <Route key={index} component={route.component} path={route.path} />

لكني لا أعرف لماذا :(

إنه يعمل معي ، لكني لا أعرف السبب أيضًا.

qtwwyl في ١٥ يناير ٢٠٢٠

إذا أتيت إلى هنا لأنك تستخدم HOC + makeStyles من Material UI ،
ها هي إجابتك: https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com

benlinton في ٢٩ يناير ٢٠٢٠

أنا حل هذا عن طريق التغيير
                <Route key={index} render={route.component} path={route.path} />
إلى
                <Route key={index} component={route.component} path={route.path} />
لكني لا أعرف لماذا :(
إنه يعمل معي ، لكني لا أعرف السبب أيضًا.

تتوقع خاصية "component" مكوِّن React ، بينما تتوقع خاصية "تقديم" دالة سيتم استدعاؤها كوظيفة. مكونات الوظيفة هي مكونات ، واستدعاءها كوظائف عادية لا يعمل إذا كانت تستخدم الخطافات وهي ليست فكرة جيدة بشكل عام.

pluma في ٣٠ يناير ٢٠٢٠

أنا حل هذا عن طريق التغيير

                <Route key={index} render={route.component} path={route.path} />

إلى

                <Route key={index} component={route.component} path={route.path} />

لكني لا أعرف لماذا :(

شكرا عزيزتي هذا عمل لي ومع ذلك فأنا محتار لماذا؟

jaisonjjames في ١٧ فبراير ٢٠٢٠

jaisonjjames انظر ردي. هناك بعض التفسيرات حول StackOverflow إذا كنت تواجه مشكلة في فهم الفرق: https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render

pluma في ١٨ فبراير ٢٠٢٠

في حالتي ، كان لدي let match = useRouteMatch("/user/:id"); خارج المكون ، وهو خطاف من جهاز التوجيه المتفاعل ، لذا كان الخطأ صحيحًا.

Rolando-Barbella في ٢٧ فبراير ٢٠٢٠

من عند

إلى

gabrielyangzon في ٥ مارس ٢٠٢٠

👍4 👎2 🎉1

من عند

<Route path="/component" component={myComponent} />

إلى

<Route path="/component"><myComponent /></Route>

ammoradi في ٢٨ مارس ٢٠٢٠

😕1 👎1 👍1

في حالتي كنت أشير إلى مكتبة من الكائن window الذي كان له إصدار React مختلف. انتهى بي الأمر باستخدام خيار التكوين externals من webpack الذي ساعدني في الإشارة إلى react و react-dom لهذه المكتبة وجعل الخطأ يختفي.

لذلك أعتقد أن سبب تلقيي هذا الخطأ هو You might have more than one copy of React in the same app .

AbreezaSaleem في ١٥ أبريل ٢٠٢٠

في حالتي كنت أشير إلى مكتبة من الكائن window الذي كان له إصدار React مختلف. انتهى بي الأمر باستخدام خيار التكوين externals من webpack الذي ساعدني في الإشارة إلى react و react-dom لهذه المكتبة وجعل الخطأ يختفي.
لذلك أعتقد أن سبب تلقيي هذا الخطأ هو You might have more than one copy of React in the same app .

AbreezaSaleem كيف حققت هذا؟ أواجه نفس المشكلة ، باستخدام مكتبة بها react كبرنامج خارجي يظهر بطريقة ما كإصدار مختلف ... لقد جربت externals: [ 'react' ] ، externals: { react: 'react' } و externals: { react: 'React' } ، النتيجة هي نفسها دائمًا ...

Myrdden في ١٨ أبريل ٢٠٢٠

لقد صنعت مثالًا بسيطًا إلى حد ما لإعادة إنتاج هذا. في حالتي ، تحدث المشكلة على ElectronJS مع حزمة الويب الإلكترونية ومنطقة الإسقاط المتفاعل

https://github.com/JuanIrache/dropzone-test

JuanIrache في ٢٣ أبريل ٢٠٢٠

هناك حل جميل لتهيئة حزمة الويب للإشارة إلى نفس / مثيل رد الفعل الفردي. كان الهدف من ذلك هو إضافة دقة داخل التطبيق الذي يستخدم وحدة "to be npm".

داخل webpack.config.js ، أضف اسمًا مستعارًا للتفاعل - لذلك يستخدم مثيل التفاعل الواحد:

module.exports = {
resolve: {
    alias: {
      react: path.resolve('./node_modules/react')
    }
  },
 // other webpack settings
}

Yolantele في ٨ مايو ٢٠٢٠

👍3 🚀2 ❤1

يمكن أن تسبب lerna هذه المشكلة ، كما علمت (ليرنيد؟) اليوم.

مستخدمو lerna ، إذا كنت تقوم بتطوير مكتبة مكونة ، فلا تقم بتضمين رد الفعل في تبعيات مكتبتك ، ضعها في peerDependencies و @ types / رد في devDependencies الخاصة بك.

rettgerst في ٢ يونيو ٢٠٢٠

بالنسبة لأي شخص يستخدم lerna ، قد تواجه هذه المشكلة عند تشغيل الاختبارات في حزمة واحدة ، حيث تشير الكود إلى مكونات في حزمة أخرى.

كانت المشكلة التي واجهناها في هذه الحالة بسبب رد الفعل الذي يتم استيراده في المواصفات ، وكذلك يتم استيراده في مكون في شجرة المكونات التي كانت تستخدم Material UI's withStyles ، والتي يتم تنفيذها باستخدام الخطافات في واجهة المستخدم المادية.

يبدو أن التفاعل يدير الحالة داخليًا في متغير ReactCurrentDispatcher.current ، وينتهي الأمر بالتعيين في حالة واحدة من التفاعلات ، ولكن يتم استخدامه في مثيل آخر من التفاعل - عندما يكون فارغًا ، فإنه يرمي Invalid hook call ... رسالة.

كنا بالفعل نستخدم Craco لإلغاء تهيئة حزمة الويب الخاصة بتطبيق Create React في وقت الإنشاء:

  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },

ومع ذلك ، يتم استخدام تجاوز حزمة الويب هذا فقط في وقت الإنشاء - عند إجراء الاختبارات ، لم يتم إنشاء الكود ، ولكن تم إنشاء مثيل له من المصدر - لذلك كان الحل لدينا هو الاستفادة من CracoAlias في craco.config.js لتحديد مسار التفاعل أثناء الاختبارات:

  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          // We need to alias react to the one installed in the desktop/node_modules
          // in order to solve the error "hooks can only be called inside the body of a function component"
          // which is encountered during desktop jest unit tests,
          // described at https://github.com/facebook/react/issues/13991
          // This is caused by two different instances of react being loaded:
          // * the first at packages/desktop/node_modules (for HostSignUpDownloadComponent.spec.js)
          // * the second at packages/components/node_modules (for packages/components/Modal)
          react: './node_modules/react',
        },
      },
    },
  ],