MuiThemeProvider.render():必须返回有效的React元素(或null) [英] MuiThemeProvider.render(): A valid React element (or null) must be returned

问题描述

我正在将Material UI与React一起使用来创建一个下拉列表.如果我将下拉组件保留在src/app.js中，则一切正常.但是，如果将其移动到单独的文件中，则fruits.js会出现以下错误:

I am using Material UI with React to create a dropdown. If I keep the dropdown component in my src/app.js everything renders fine. However, if I move it to a separate file, fruits.js I get the following errors:

1. MuiThemeProvider.render():必须返回有效的React元素(或null).您可能返回了undefined，数组或其他无效对象.

1. MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

未处理的拒绝(TypeError):无法读取null的属性'_currentElement'

Unhandled Rejection (TypeError): Cannot read property '_currentElement' of null

这是我在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"}]

推荐答案

<MuiThemeProvider>只能有一个孩子，否则会抛出错误，因此请将其包装在<div>:

<MuiThemeProvider> can only have one child, or else it will throw an error, so wrap it in a <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>

这篇关于MuiThemeProvider.render():必须返回有效的React元素(或null)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！