Question

我正在使用react-dropzone在我的反应web应用程序中实现一个上传文件dropzone，我打算向我的.NET Core Web API发送一个post请求来解析文件并将其保存到DB。我正在使用这个tutorial作为指导，同时根据我的项目规范进行自己的调整，并且我一直得到以下错误，我不确定如何修复：

警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于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;

提前感谢你。非常感谢任何帮助。

Answer 1

您对RaisedButton的导入是错误的。它应该是

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

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

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

使用您当前的导入时，找不到RaisedButton和PageHeader。

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

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

至于问题：“我何时import React from 'react';”与“我何时import { Component } from 'react';：

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

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

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

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

React.createElement：type不应为null，undefined，boolean或number Error

1 个答案: