反应：页面未更新

Question

MarketEvent.tsx的模块，功能是集中控制器：

import * as React from 'react';
import EventList from './EventList';
import FullReduce from './FullReduce';

import './MarketEvent.less'

export default class MarketEvent extends React.Component<{},any> {

public id: string;
public name: string;
public target: JSX.Element;
public defaultId: string;

public state = {
    target:  this.target,
    defaultId: 'marketMain'
};

public constructor(defaultId:any) {
    super(defaultId);
    this.changeTarget = this.changeTarget.bind(this);
    this.target = this.state.target;
    console.log('传到父组件的ID：',this.state.defaultId);

    switch (this.state.defaultId) {
        case 'marketMain':
            this.target = <EventList currentRoute={this.changeTarget}/>;
            break;
        case 'fullReduce':
            this.target = <FullReduce currentRoute={this.changeTarget}/>;
            break;
        default:
            this.target = <EventList currentRoute={this.changeTarget}/>;
    }
}

public componentWillMount(){
    console.log('componentWillMount MarketEvent');
}

public componentDidMount(){
    console.log('componentDidMount MarketEvent');
}

public changeTarget = (id: string) => {
    console.log('子组件传到父组件的ID：',this.state);

    this.setState({
        defaultId: id
    })
};


public render(){
    return(
        <div>
            {this.target}
        </div>
    )
}

}

EventList.tsx的模块，功能是显示3个列表:

import * as React from 'react';

import './MarketEvent.less'

interface EventListProps {
    currentRoute: any
}

export default class EventList extends React.Component<EventListProps,any> {

public componentWillMount(){
    console.log('componentWillMount EventList')
}
public componentDidMount(){
    console.log('componentDidMount EventList')
}

public refName = (id: string) => {
    this.props.currentRoute(id);
};

public render(){
    return(
        <div className="market_event">
            <div className="market_top">
                营销活动
            </div>
            <div className="market_body">
                <ul className="market_ul">
                    <li onClick={this.refName.bind(this,'fullReduce')}><a href="javascript:;"><span className="l1">减</span>
                        <div className="event_box">
                            <h2>店铺满减</h2>
                            <i>促销</i><i>客单价</i>
                            <p>下单满足条件可享受减免</p>
                        </div>
                    </a></li>
                    <li><a href="javascript:;"><span className="l2">店</span>
                        <div className="event_box">
                            <h2>店铺代金券</h2>
                            <i>拉新</i><i>引流</i>
                            <p>进店时可领取店铺专用代金券</p>
                        </div>
                    </a></li>
                    <li><a href="javascript:;"><span className="l3">促</span>
                        <div className="event_box">
                            <h2>折扣促销</h2>
                            <i>新品</i><i>爆款</i>
                            <p>下单满足条件可享受减免</p>
                        </div>
                    </a></li>
                </ul>
            </div>
        </div>
    )
}

}

FullReduce.tsx的模块，作为列表中的详情页：

import * as React from 'react';
import {Button} from "antd";

interface FullReduceProps {
    currentRoute: any
}

export default class FullReduce extends React.Component<FullReduceProps,any> {

public componentWillMount(){
    console.log('componentWillMount  FullReduce');

}

public componentDidMount(){
    console.log('componentDidMount  FullReduce')
}
public refName = (id:string) => {
    this.props.currentRoute(id);
};

public render(){
    return(
        <div>
            <Button htmlType='button' onClick={this.refName.bind(this,'marketMain')}>返回</Button>
            已经进入了店铺满减页面了
        </div>
    )
}

}

我要实现的效果是点击EventList中的一个列表。 tsx，return 集中控制器 MarketEvent 的 ID。 tsx，然后通过判断渲染对应的页面，但是点击后发现defaultID变了，页面不是rendered.I 打印this.state 在控制台上发现目标在this.state 未定义。

我不知道为什么。有好手帮帮我吗？非常感谢！！

Answer 1

MarketEvent 构造函数不会在状态更改后再次运行。如果你想让switch语句再次运行来选择不同的子组件显示，把它移到render方法：

export default class MarketEvent extends React.Component<{},any> {

    public id: string;
    public name: string;
    public defaultId: string;

    public state = {
        defaultId: 'marketMain'
    };

    public constructor(defaultId:any) {
        super(defaultId);
        this.changeTarget = this.changeTarget.bind(this);
        console.log('传到父组件的ID：',this.state.defaultId);        
    }

    public componentWillMount(){
        console.log('componentWillMount MarketEvent');
    }

    public componentDidMount(){
        console.log('componentDidMount MarketEvent');
    }

    public changeTarget = (id: string) => {
        console.log('子组件传到父组件的ID：',this.state);

        this.setState({
            defaultId: id
        })
    };


    public render(){
        let target;
        switch (this.state.defaultId) {
            case 'marketMain':
                target = <EventList currentRoute={this.changeTarget}/>;
                break;
            case 'fullReduce':
                target = <FullReduce currentRoute={this.changeTarget}/>;
                break;
            default:
                target = <EventList currentRoute={this.changeTarget}/>;
        }
        return(
            <div>
                {target}
            </div>
        )
    }

}

反应：页面未更新

React: Page not updated

typescript

reactjs

antd