我正在使用的材料用户界面与反应创建一个下拉。如果我将下拉组件保存在我的src/app.js中,那么一切都很好。但是,如果我将它移动到一个单独的文件中,fruits.js将得到以下错误:
MuiThemeProvider.render():必须返回有效的React元素(或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"}]发布于 2017-07-16 05:39:50
<MuiThemeProvider>只能有一个子程序,否则它会抛出一个错误,因此将其包装在一个<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>https://stackoverflow.com/questions/45125399
复制相似问题