Jquery не работает в методе класса render (), но работает в componentDidMount () - PullRequest
Новая
       46

Jquery не работает в методе класса render (), но работает в componentDidMount ()

0 голосов
/ 07 мая 2020

Я обновляю свои пакеты до последней версии. раньше в моем проекте не было ошибок. но после обновления следующего js до версии 9 и jquery до версии 3.5 $ .map не работает должным образом. когда я использую $ .map в методе render () компонента класса, 

import $ from "jquery";
.
.
.

render() {

        let rec = [
            {'id':2},
            {'id':3},
            ];

        $.map(rec, function (value) {
            console.log('value',value.id);
        });

        return (

он возвращает эту ошибку. 

TypeError: jquery__WEBPACK_IMPORTED_MODULE_7___default.a.map is not a function

> 33 | $.map(rec, function (value) {
     | ^  34 |     console.log('value',value.id);
  35 | });

но в componentDidMount он работает правильно 

componentDidMount = () => {
        let rec = [
            {'id':2},
            {'id':3},
        ];
        $.map(rec, function (value) {
            console.log('value',value.id);
        });
    }

это мой пакет. json содержимое файла: 

{
  "name": "ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "author": "Emmanuel Henri",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^13.13.5",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.7",
    "@types/react-redux": "^7.1.8",
    "@zeit/next-css": "1.0.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "isomorphic-unfetch": "^3.0.0",
    "jquery": "^3.5.1",
    "moment-jalaali": "^0.9.2",
    "next": "^9.3.6",
    "next-redux-wrapper": "^5.0.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-datepicker2": "^3.2.0",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "ts-loader": "^7.0.3",
    "typesafe-actions": "^5.1.0",
    "typescript": "^3.8.3"
  },
  "proxy": "http://localhost:8000",
  "devDependencies": {
    "package": "^1.0.1"
  }
}

1 Ответ

2 голосов
/ 07 мая 2020

Здесь несколько проблем:

  • В общем, вы не должны использовать jQuery в приложении React. jQuery - это в первую очередь библиотека для манипуляций с DOM. React создает и обновляет DOM, и если другой код изменяет DOM, которым «владеет» React, все имеет тенденцию ломаться. (Бывают случаи, когда вам может потребоваться какое-то взаимодействие между React и jQuery, например, оборачивание плагина jQuery в компоненте React при переносе приложения, но в большинстве случаев использование React означает, что вы не должны используйте jQuery вообще.)
  • Не используйте $.map() для перебора массивов. Массивы уже имеют встроенную функцию Array.map().
  • Поскольку render() будет запускаться в первый раз перед монтированием компонента, очень вероятно, что глобальная переменная $ еще не была инициализирована каким-то образом.

Но да , не используйте здесь jQuery.

...