我正在使用 Material UI 和 React 来创建一个下拉菜单。如果我将下拉组件保留在我的src/app.js
一切都呈现良好。但是,如果我将其移至单独的文件中,fruits.js
我收到以下错误:
MuiThemeProvider.render()
:必须返回有效的 React 元素(或 null)。您可能返回了未定义的数组或其他无效对象。
未处理的拒绝(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;
My 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/水果 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"}]