React.createElement：類型不應為空、未定義、布爾值或數字錯誤

Question

我正在使用 react-dropzone 在我的 React Web 應用程序中實現上傳文件 dropzone，我打算向我的 .NET Core Web API 發送一個 post 請求以解析文件並將其保存到數據庫。 我使用本教程作為指南，同時進行自己的調整以適應我的項目規范，但我不斷收到以下錯誤，我不確定如何解決：

警告：React.createElement：類型不應為空、未定義、布爾值或數字。 它應該是一個字符串（對於 DOM 元素）或一個 ReactClass（對於復合組件）。 檢查Upload的渲染方法。

此錯誤會阻止應用程序呈現組件。 我研究了錯誤並找到了以下答案，但我認為它們與我的問題無關。

• https://github.com/ReactTraining/react-router/issues/2220
• https://codereviewvideos.com/blog/warning-react-createelement/

請在下面查看我的上傳組件：

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 default ...;是什么export default ...; ，您可以使用import MyName from 'someModule';導入它import MyName from 'someModule'; . 基本上，您可以根據自己的喜好自由選擇MyName ，但是如果您選擇的名稱不符合他們的期望，則可能會使您的代碼讀者感到困惑。 例如，JSX 轉譯器要求您將導入作為import React from 'react'; .

對於模塊導出的所有其他內容（按名稱），您必須編寫導入語句，例如import { Component } from 'react'; - 模塊以該名稱導出Component ，如果要導入Component ，則必須明確命名。