React-dnd: Kesalahan Tidak Tertangkap: Item harus berupa objek

Dibuat pada 1 Jun 2018  ·  3Komentar  ·  Sumber: react-dnd/react-dnd

Hai. Saya mencoba menemukan penyebutan bug ini, tetapi sayangnya tidak ada apa pun di sini atau di web.

Saya memulai sebuah proyek dan memiliki pengaturan yang cukup sederhana dan ketika mencoba menyeret elemen, mengalami kesalahan ini:
http://prntscr.com/jpfale

Ini adalah komponen Drag saya:

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);

Kontainer terhubung dengan konteks:

export default DragDropContext(HTML5Backend)(App);

Saya sudah melakukan satu proyek dengan react-dnd, tetapi ini adalah pertama kalinya saya melihat masalah ini. Ini package.json saya jika masalah ini dapat dikaitkan dengan kompatibilitas perpustakaan:

{
  "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"
  }
}

Tolong bantu menyelesaikan masalah ini.

bug

Komentar yang paling membantu

@ andrew-farries, ada dua masalah di sini: satu ada di pihak kami, pemeriksaan predikat gagal dan mengakibatkan kegagalan diam-diam.

Masalah lainnya ada di pihak Anda - karena kami menggunakan ref untuk menangani elemen DOM komponen Anda, Anda tidak dapat menggunakan React SFC sebagai DragSource, DropTarget, atau DragLayer - mereka harus kelas yang memperluas React.Component.

Semua 3 komentar

Saya juga melihat kesalahan ini. Berikut adalah kotak pasir yang sangat sederhana yang menunjukkan masalahnya:

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

Segera setelah Anda mencoba menarik kartu, kesalahan yang dijelaskan oleh OP terjadi.

Kesalahannya ada di sini, sepertinya komponen belum diterima pada titik ini, jadi ini mengalami hubungan pendek tanpa memanggil fungsi beginDrag () dari spesifikasi.

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

@ andrew-farries, ada dua masalah di sini: satu ada di pihak kami, pemeriksaan predikat gagal dan mengakibatkan kegagalan diam-diam.

Masalah lainnya ada di pihak Anda - karena kami menggunakan ref untuk menangani elemen DOM komponen Anda, Anda tidak dapat menggunakan React SFC sebagai DragSource, DropTarget, atau DragLayer - mereka harus kelas yang memperluas React.Component.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat