5回答

好帮手慕星星

2019-09-18

已采纳

同学你好，

是写了哪个页面后出现错误的呢，建议将页面的代码粘贴上来，老师帮助你测试下，便于准确定位问题所在。

祝学习愉快！

0

himSpan

h import React, { Component, Fragment } from 'react'; import {Link} from 'react-router-dom'; import { Menu, Icon } from 'antd'; import axios from 'axios'; import logo from './logo.png'; import './style.css'; class AppHeader extends Component { constructor(props) { super(props); this.state = { list: [] } } //循环遍历list里面的数据，生成6个Menu.Item组件 getMenuItems() { console.log(this.state.list); return this.state.list.map(item => { return ( <Menu.Item key={item.id}> {/* 这里需要多理解 */} <Link to={`/${item.id}`}> <Icon type={item.icon} />{item.title} </Link> </Menu.Item> ) }) } componentDidMount(){ axios.get('http://www.dell-lee.com/react/api/header.json') .then(res => { this.setState({ list: res.data.data }) }) } render() { return ( <Fragment> <img src={logo} className='app-header-logo' /> <Menu mode="horizontal" className='app-header-menu' > {this.getMenuItems()} </Menu> </Fragment> ) } } export default AppHeader;

h019-09-18

共1条回复

TimSpan

提问者

2019-09-18

0

himSpan

h ok 了 axios antd 路由 都重新安装了 看来 看懂提示是真它喵的重要！

h019-09-18

共2条回复

TimSpan

提问者

2019-09-18

0

好帮手慕星星

2019-09-18

你好，

代码中缺少半个花括号：

添加上就可以了。下次同学粘贴的时候可以选择一下格式哦，例如：

import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { Menu, Icon } from 'antd';
import axios from 'axios';
import logo from './logo.png';
import './style.css';
class AppHeader extends Component {
    constructor(props) {
        super(props);
        this.state = { list: [] }
    }
    //循环遍历list里面的数据，生成6个Menu.Item组件
    // 这里缺少半个花括号
    getMenuItems() {
        console.log(this.state.list);
        return this.state.list.map(item => {
            return (<Menu.Item key={item.id}>
          {/* 这里需要多理解 */} 
          <Link to={`/${item.id}`}> 
          <Icon type={item.icon} />{item.title}
           </Link> 
           </Menu.Item>)
        })
    }
    componentDidMount() {
        axios.get('http://www.dell-lee.com/react/api/header.json')
            .then(res => {
                this.setState({
                    list: res.data.data
                })
            })
    }
    render() {
        return (
            <Fragment> 
     		<img src={logo} className='app-header-logo' />
     	 	<Menu mode="horizontal" className='app-header-menu'>
     	 	 {this.getMenuItems()}
     	 	</Menu>
     	 	</Fragment>
        )
    }
}
export default AppHeader;

自己测试下，祝学习愉快！

0

himSpan

h 没有少花括号啊 而且少了 vscode肯定会提示的

h019-09-18

共1条回复

TimSpan

提问者

2019-09-18

import React, { Component, Fragment } from 'react';
import {Link} from 'react-router-dom';
import { Menu, Icon } from 'antd';
import axios from 'axios';

import logo from './logo.png';
import './style.css';

class AppHeader extends Component {

    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    //循环遍历list里面的数据，生成6个Menu.Item组件
    getMenuItems() {
        console.log(this.state.list);
        return this.state.list.map(item => {
            return (
                <Menu.Item key={item.id}>

                    {/* 这里需要多理解 */}
                    <Link to={`/${item.id}`}>
                        <Icon type={item.icon} />{item.title}
                    </Link>
                </Menu.Item>
            )
        })

    }
    componentDidMount(){
        axios.get('http://www.dell-lee.com/react/api/header.json')
        .then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }

    render() {
        return (
            <Fragment>
                <img src={logo} className='app-header-logo' />
                <Menu
                    mode="horizontal" className='app-header-menu'
                >
                    {this.getMenuItems()}
                </Menu>
            </Fragment>
        )
    }
}
export default AppHeader;

import React, { Component } from 'react';
import axios from 'axios';
import { List } from 'antd';



class PageList extends Component {
    componentWillReceiveProps(nextProps){

        console.log(nextProps);

    }

    constructor(props){
        super(props);
        this.state = {
            data: []
        }
    }

    render() {
        return (
            <List
                style={{background:'#fff'}}
                bordered
                dataSource={this.state.data}
                renderItem={item => (
                    <List.Item>
                        {item.title}
                    </List.Item>
                )}
            />
        )

    }
    // 这里需要多理解
    componentDidMount(){
        const id = this.props.match.params.id;
        axios.get('http://www.dell-lee.com/react/api/list.json?id=' + id)
        .then(res => {
            this.setState({
                data: res.data.data
            });
        })
    }
}
export default PageList;

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Layout } from 'antd';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import AppHeader from './components/Header/';
import List from './containers/List/';
import Detail from './containers/Detail/';


import 'antd/dist/antd.css';
import './style.css';


const { Header, Footer, Content } = Layout;

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <Layout style={{ minWidth: 1300, height: '100%' }}>
                    <Header className='header'>

                        <AppHeader />

                    </Header>

                    <Content className='content'>
                        <Switch>

                            <Route path='/detail' component={Detail} />

                            <Route path='/:id' component={List} />

                        </Switch>
                    </Content>

                    <Footer className='footer'>@copyright TimSpan 2019</Footer>
                </Layout>
            </BrowserRouter >
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

0