javascript - MuiThemeProvider.render() : A valid React element (or null) must be returned

Question

我将 Material UI 与 React 结合使用来创建下拉菜单。如果我将下拉组件保留在我的 src/app.js 中，一切都很好。但是，如果我将它移动到一个单独的文件 fruits.js，我会收到以下错误:

1. MuiThemeProvider.render():必须返回有效的 React 元素(或 null)。您可能返回了未定义、数组或其他一些无效对象。

2. 未处理的拒绝 (TypeError):无法读取 null 的属性“_currentElement”

这是我在 app.js 中的代码:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Fruits from './fruits';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <h1>Fruits</h1>
        <Fruits/>
      </div>
    );
  }
}

export default App;

我在 fruits.js 中的代码:

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

class Fruits extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: '',
      current_fruit_pic: '',
      fruits: []
    };
  }
  componentWillMount(){
    let that = this;
    fetch('http://localhost:3001/fruits',{mode: 'cors'}).then((res)=>{
      res.json().then((data)=>{
        that.setState({
          fruits: data
        })
      });
    });
  }

  handleChange = (event, index, value) => {
    this.setState({
      msg: "you have clicked " + value.type,
      current_fruit_pic: value.img
    },()=> console.log(this.state));
  };
  render() {
    return (
    <MuiThemeProvider>
        <h2>{this.state.msg}</h2>
        <img className='fruit-image' src={this.state.current_fruit_pic} alt='no fruit chosen'/>
        <br/>
        <DropDownMenu value={this.state.value} onChange={this.handleChange}  openImmediately={true}>
        {
          this.state.fruits.map(function(fruit,i){
            return <MenuItem key={i} value={fruit} primaryText={fruit.type}/>
          })   
        }
        </DropDownMenu>
    </MuiThemeProvider>
    );
  }
}

export default Fruits;

我的package.json:

{
  "name": "glocomm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "express": "^4.15.3",
    "material-ui": "^0.18.6",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-tap-event-plugin": "^2.0.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

从 http://localhost:3001/fruits 返回的数据:

[{"type":"apple","img":"http://images.all-free-download.com/images/graphiclarge/apple_graphic_6815072.jpg"},{"type":"banana","img":"http://img05.deviantart.net/e8a7/i/2015/336/6/4/banana_vector_by_alexismnrs-d9isfz4.png"},{"type":"pear","img":"http://www.pngmart.com/files/1/Pear-Vector-PNG.png"},{"type":"strawberry","img":"http://4vector.com/i/free-vector-strawberry-clip-art_113695_Strawberry_clip_art_hight.png"},{"type":"watermelon","img":"http://www.freepngimg.com/thumb/watermelon/16-watermelon-png-image-thumb.png"}]

Answer 1

<MuiThemeProvider>只能有一个 child ，否则会抛出错误，所以将其包装在 <div> 中:

<MuiThemeProvider>
  <div>
    <h2>{this.state.msg}</h2>
    <img className='fruit-image' src={this.state.current_fruit_pic} alt='no fruit chosen' />
    <br />
    <DropDownMenu value={this.state.value} onChange={this.handleChange}  openImmediately={true}>
      {
        this.state.fruits.map(function(fruit, i) {
          return <MenuItem key={i} value={fruit} primaryText={fruit.type} />
        })   
      }
    </DropDownMenu>
  </div>
</MuiThemeProvider>