2

我正在使用 react-dropzone 在我的 react Web 应用程序中实现上传文件 dropzone，我打算向我的 .NET Core Web API 发送一个发布请求以解析文件并将其保存到数据库。我使用本教程作为指南，同时进行自己的调整以适应我的项目规范，并且我不断收到以下错误，我不确定如何修复：

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。检查Upload.

此错误会阻止应用程序呈现组件。我研究了该错误并找到了以下答案，但我相信它们与我的问题无关。

请参阅下面的上传组件：

import React, { PropTypes, Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import Dropzone from 'react-dropzone';
import FontIcon from 'material-ui/FontIcon';
import { blue500 } from 'material-ui/styles/colors';
import { PageHeader, Panel } from 'react-bootstrap';

const request = require('superagent');

const apiBaseUrl = 'http://localhost:5000/api/';

const style = {
  margin: 15,
};

const title = 'Upload';

class Upload extends Component {
  constructor(props, context) {
    super(props);
    this.state = {
      filesPreview: [],
      filesToBeSent: [],
      printcount: 10,
    };
    context.setTitle(title);
  }

  onDrop(acceptedFiles) {
    console.log('Accepted files: ', acceptedFiles[0].name);
    const filesToBeSent = this.state.filesToBeSent;
    if (filesToBeSent.length < this.state.printcount) {
      filesToBeSent.push(acceptedFiles);
      const filesPreview = [];
      Object.keys(filesToBeSent).forEach((key, i) => {
        filesPreview.push(<div>
          {filesToBeSent[i][0].name}
          <MuiThemeProvider>
            <a href=""><FontIcon
              className="material-icons customstyle"
              color={blue500}
              styles={{ top: 10 }}
            >clear</FontIcon></a>
          </MuiThemeProvider>
        </div>
          );
      });
      this.setState({ filesToBeSent, filesPreview });
    } else {
      alert('You have reached the limit of printing files at a time');
    }
  }

  handleClick(event) {
    console.log('handleClick: ', event);
    const self = this;
    console.log('self: ', self);
    if (this.state.filesToBeSent.length > 0) {
      const filesArray = this.state.filesToBeSent;
      const req = request.post(`${apiBaseUrl}fileupload`);
      Object.keys(filesArray).forEach((key, i) => {
        console.log('files', filesArray[i][0]);
        req.attach(filesArray[i][0].name, filesArray[i][0]);
        req.end((err, res) => {
          if (err) {
            console.log('error ocurred');
          }
          console.log('res', res);
          alert('File printing completed');
        });
      });
    } else {
      alert('Please upload some files first');
    }
  }

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-lg-12">
            <PageHeader>Upload Data</PageHeader>
          </div>
        </div>
        <div className="row">
          <div className="col-lg-12 col-md-8 col-sm-4">
            <Panel
              header={<span>
                <i className="fa fa-location-arrow fa-fw" /> Drag
                      and drop your file here, or use the file browser:
                    </span>}
            >
              <div className="App col-lg-6 col-md-4 col-sm-2">
                <Dropzone onDrop={(files) => this.onDrop(files)}>
                  <div>Try dropping some files here, or click to select files to upload.</div>
                </Dropzone>
              </div>
              <div className="col-lg-6 col-md-4 col-sm-2">
                 Files to be printed are:
                  {this.state.filesPreview}
              </div>
              <MuiThemeProvider>
                <RaisedButton
                  label="Print Files" style={style}
                  onClick={(event) => this.handleClick(event)}
                />
              </MuiThemeProvider>
            </Panel>
          </div>
        </div>
      </div>
    );
  }
}

Upload.contextTypes = { setTitle: PropTypes.func.isRequired };
export default Upload;

提前谢谢你。任何帮助是极大的赞赏。

4

1 回答 1

1

你的导入RaisedButton是错误的。它应该是

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';

PageHeader 的导入也是错误的。它应该是

import { PageHeader, Panel } from 'react-bootstrap';

使用您当前的导入，它找不到RaisedButtonand PageHeader。

为了找到问题，我暂时在 render 方法中添加了日志语句：

render() {
  console.log("Panel", panel);
  console.log("MuiThemeProvider", MuiThemeProvider);
  //... for all components
  return (
    //...
  );
}

至于问题：“我什么时候做import React from 'react';”与“我什么时候做import { Component } from 'react';：

这取决于您尝试导入的模块以及它如何导出它导出的内容。有关详细信息，请参阅导出和导入。

一个模块可以有一个（并且只有一个）“默认导出”（但它不需要提供默认导出！）和任意数量的“命名导出”。

无论模块使用 导出的内容是什么export default ...;，您都可以使用 导入它import MyName from 'someModule';。基本上您可以MyName根据自己的喜好自由选择，但是如果您选择的名称与他们的期望不符，它可能会使您的代码的读者感到困惑。例如，JSX 转译器要求您以import React from 'react';.

对于模块导出的所有其他内容（按名称），您必须编写一个导入语句，例如import { Component } from 'react';- 模块Component以该名称导出，如果要导入Component，则必须明确命名。

于 2018-03-03T21:33:10.727 回答