React.createElement: type 不应为 null、undefined、boolean 或 number 错误

Question

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

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of 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 (
    //...
  );
}

关于问题："when do I import React from 'react';" 与“我什么时候 import { Component } from 'react';:

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

一个模块可以有一个（而且只有一个）"default export"（但它不需要提供默认的 exprort！）和任意数量的 "named exports".

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

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

React.createElement: type 不应为 null、undefined、boolean 或 number 错误

React.createElement: type should not be null, undefined, boolean, or number Error

javascript

reactjs

react-dropzone