找个BUG 找半天没找出来 react 的代码我要怎么发过来?

正在回答

登陆购买课程后可参与讨论,去登陆

5回答

同学你好,

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

祝学习愉快!

  • TimSpan 提问者 #1
    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;
    2019-09-18 14:54:25
提问者 TimSpan 2019-09-18 15:57:58
  • 报错信息是axios模块没有找到,同学是不是没有安装就使用了呢?可以使用命令安装下哦:npm install --save axios。自己再试试。
    2019-09-18 16:16:28
  • 提问者 TimSpan #2
    ok 了 axios antd 路由 都重新安装了 看来 看懂提示是真它喵的重要!
    2019-09-18 16:40:32
提问者 TimSpan 2019-09-18 15:56:25
好帮手慕星星 2019-09-18 15:12:53

你好,

代码中缺少半个花括号:

http://img1.sycdn.imooc.com//climg/5d81d88809859a1306240253.jpg

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

http://img1.sycdn.imooc.com//climg/5d81d8c109b4615701830276.jpg

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;

自己测试下,祝学习愉快!

  • 提问者 TimSpan #1
    没有少花括号啊 而且少了 vscode肯定会提示的
    2019-09-18 15:50:24
提问者 TimSpan 2019-09-18 14:56:25
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'));


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师