Reactjs：单击另一个组件的按钮后未显示子组件

Question

我有四个组件。 1：导航，2：主页，3：组，4：GroupsChild。

在导航组件中有两个组件和一个Button。当我单击按钮时，它会正确显示GroupsChild 组件。

但是当我先单击Group，然后单击按钮（在Navigation 中命名为Click Me），它不会显示GroupsChild 组件。我认为问题出在Group.jscomponentDidMount。

我应该改变什么？

导航.js

import React, { Component } from 'react';
import Group from './Group';
import Home from './Home';

class Navigation extends Component {
    constructor() {
        super()
        this.state={
            home: true,
            group: false,
            num: null,
        }
    }
    home=()=>{
        this.setState({home:true, group:false})
    }
    group=()=>{
        this.setState({home:false, group:true})
    }
    click=()=>{
        this.setState({home:false, group:true, num:1})// i want to pass the num
    }
    render() {
        return (
            <div>
                <div className='row'>
                    <div onClick={this.home} className='col half'>Home</div>
                    <div onClick={this.group} className='col half'>Group</div>
                </div>
                <button onClick={this.click}>Click Me</button><br/>
                ---------------------------
            {this.state.home?(<Home/>):null}
            {this.state.group?(<Group num={this.state.num}/>):null}
            </div>
        );
    }
}
export default Navigation;

Group.js

import React, { Component } from 'react';
import GroupsChild from './GroupsChild';

class Group extends Component {
    constructor() {
        super()
        this.state={
            child: false,
        }
    }
    child=()=>{
        this.setState({child:true})
    }
    componentDidMount(){ //  <<<--------- here is the problem
        if(this.props.num !== null){
            this.setState({child:true})
        }
    }
    render() {
        return (
            <div>
                <h1>Group</h1>
                <button onClick={this.child}>Child</button>
            {this.state.child?(<GroupsChild/>):null}
            </div>
        );
    }
}
export default Group;

Home.js

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return (
            <div className='container'>
                home
            </div>
        );
    }
}

export default Home;

GroupsChild.js

import React, { Component } from 'react';

class GroupsChild extends Component {
    render() {
        return (
            <div className='container'>
                Groups Child
            </div>
        );
    }
}

export default GroupsChild;

我还有一个问题。这很烦人，但请解决这个问题。 当我先点击 Group 然后点击 Click me 然后 Home 然后再点击 Group ，它应该只显示 Group 组件，而不是 GroupsChild。

怎么做？

Answer 1

但是当我先点击Group，然后点击按钮（名为“点击 我”在Navigation)，它没有显示GroupsChild 组件。我认为 问题出在Group.jscomponentDidMount。

看来您还需要在Group 中实现componentDidUpdate。当Navigation 中的状态设置group 为true 且未设置num 状态时，则Group 使用未定义的num 属性值挂载。

class Group extends Component {
    constructor() {
        super()
        this.state = {
            child: false,
        }
    }
    child = () => {
        this.setState({ child: true });
    }
    checkNum = () => {
        if (this.props.num !== null) {
            this.setState({ child: true });
        }
    };
    componentDidMount() {
        this.checkNum();
    }
    componentDidUpdate(prevProps) {
        if (prevProps.num !== this.props.num) {
            this.checkNum();
        }
    }
    render() {
        return (
            <div>
                <h1>Group</h1>
                <button onClick={this.child}>Child</button>
                {this.state.child ? (<GroupsChild/>) : null}
            </div>
        );
    }
}

我还有一个问题。这很烦人，但请解决这个问题。当我 先点击 Group 然后点击我 然后 Home 然后再点击 Group ，它应该 仅显示 Group 组件，不显示 GroupsChild。

我认为这可能是您在单击“主页”时需要在Navigation 中“重置”或“取消设置”num 状态的情况。

class Navigation extends Component {
    constructor() {
        super()
        this.state = {
            home: true,
            group: false,
            num: null,
        }
    }

    home = () => {
        this.setState({
            home:true,
            group:false,
            num: null, // <-- reset back to null
        });
    }

    ...