React-dnd: Erreur non interceptée: l'élément doit être un objet

Créé le 1 juin 2018  ·  3Commentaires  ·  Source: react-dnd/react-dnd

Salut. J'ai essayé de trouver des mentions de ce bogue, mais malheureusement rien n'était présent ici ou sur le web.

J'ai commencé un projet et j'ai une configuration assez simple et en essayant de faire glisser un élément, j'ai cette erreur:
http://prntscr.com/jpfale

Voici mon composant Drag:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { DragSource } from 'react-dnd';

const Container = styled.span`
  margin: 10px;
  font-size: 4rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.4s;

  &.is-clicked {
    color: ${({ theme }) => theme.colors.purple};
  }

  &.is-hidden {
    opacity: 0;
  }
`;

const spec = {
  beginDrag(props) {
    console.log('test');
    return {};
  },
};

const WordItem = ({
  children,
  item,
  isHidden,
  handleClick,
  connectDragSource,
}) => {
  return connectDragSource(
    <span>
      <Container
        className={item.clicked ? 'is-clicked' : isHidden}
        onClick={handleClick}
      >
        {children}
      </Container>
    </span>,
  );
};

WordItem.propTypes = {
  children: PropTypes.string.isRequired,
  item: PropTypes.objectOf(PropTypes.any).isRequired,
  isHidden: PropTypes.string.isRequired,
  handleClick: PropTypes.func.isRequired,
};

export default DragSource('word', spec, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
  dropResult: monitor.getDropResult(),
  canDrag: monitor.canDrag(),
}))(WordItem);

Conteneur connecté au contexte:

export default DragDropContext(HTML5Backend)(App);

J'ai déjà fait un projet avec react-dnd, mais c'est la première fois que je vois ce problème. Voici mon package.json si ce problème peut être lié à la compatibilité des bibliothèques:

{
  "name": "",
  "version": "1.0.0",
  "description": "npm i -g prettier",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf dist",
    "dev": "cross-env NODE_ENV=development node devServer.js",
    "build": "npm run clean && cross-env NODE_ENV=production webpack --config=webpack.build.config.js -p && node productionServer.js",
    "flow": "flow"
  },
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 5 versions",
    "not ie < 11"
  ],
  "prettier": {
    "singleQuote": true,
    "trailingComma": "all"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-plugin-styled-components": "^1.5.1",
    "es6-promise": "^4.2.4",
    "prop-types": "^15.6.1",
    "rc-slider": "^8.6.1",
    "react": "^16.3.2",
    "react-dnd": "^3.0.2",
    "react-dnd-html5-backend": "^3.0.2",
    "react-dom": "^16.3.2",
    "react-motion": "^0.5.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-thunk": "^2.2.0",
    "styled-components": "^3.2.6",
    "svg-inline-loader": "^0.8.0",
    "xml2js": "^0.4.19"
  },
  "devDependencies": {
    "autoprefixer": "^8.3.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "browserslist": "^3.2.4",
    "compression-webpack-plugin": "^1.1.11",
    "cross-env": "^5.1.4",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.7.0",
    "express": "^4.16.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "flow-bin": "^0.70.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.2.0",
    "node-sass": "^4.8.3",
    "postcss-loader": "^2.1.4",
    "prettier-eslint": "^8.8.1",
    "react-hot-loader": "^4.0.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2",
    "webpack-dev-middleware": "^3.1.2",
    "webpack-hot-middleware": "^2.22.1"
  }
}

Veuillez aider à résoudre ce problème.

bug

Commentaire le plus utile

@ andrew-farries, il y a deux problèmes ici: l'un est de notre côté, une vérification de prédicat échoue et entraîne des échecs silencieux.

L'autre problème est de votre côté - parce que nous utilisons ref pour obtenir une poignée sur l'élément DOM de votre composant, vous ne pouvez pas utiliser un React SFC comme DragSource, DropTarget ou DragLayer - ils doivent être classes qui étendent React.Component.

Tous les 3 commentaires

Je vois également cette erreur. Voici un bac à sable très simple qui montre le problème:

https://codesandbox.io/s/5wm42wv5ol

Dès que vous essayez de faire glisser la carte, l'erreur décrite par l'OP se produit.

L'erreur est là, il semble que le composant n'a pas été reçu à ce stade, donc cela court-circuite sans appeler la fonction beginDrag () de la spécification.

https://github.com/react-dnd/react-dnd/blob/c4bab9ac93e5a04d743b1267b325128392ce15b7/packages/react-dnd/src/createSourceFactory.ts#L93

@ andrew-farries, il y a deux problèmes ici: l'un est de notre côté, une vérification de prédicat échoue et entraîne des échecs silencieux.

L'autre problème est de votre côté - parce que nous utilisons ref pour obtenir une poignée sur l'élément DOM de votre composant, vous ne pouvez pas utiliser un React SFC comme DragSource, DropTarget ou DragLayer - ils doivent être classes qui étendent React.Component.

Cette page vous a été utile?
0 / 5 - 0 notes