反应设置状态重新渲染

首先,我对React真的很陌生,所以请原谅我对这个问题缺乏了解。

我有这样的事情,我想知道这是不是一个好的做法,我如何才能解决这类问题,以改善等。

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = { 
            key: value
        }
        this.functionRender = this.functionRender.bind(this)
        this.changeValue = this.changeValue.bind(this)
    }
    functionRender = () => {
        if(someParams !== null) {
            return <AnotherComponent param={this.state.key} />
        }
        else {
            return "<span>Loading</span>"
        }
    }
    changeValue = (newValue) => {
        this.setState({
            key: newValue
        })
    }
    render() {
        return (<div>... {this.functionRender()} ... <span onClick={() => this.changeValue(otherValue)}>Click me</span></div>)
    }
}

class AnotherComponent extends Component {
    constructor (props) {
        super(props)
    }
    render () {
        return (
            if (this.props.param === someOptions) {
                return <div>Options 1</div>
            } else {
                return <div>Options 2</div>
            }
        )
    }
}

代码的意图是,当我单击span时,它将更改状态的键,然后更改组件 <AnotherComponent />

我保证当我创建setState时,在回调中抛出一个带有新值的控制台日志,并且设置正确,但是 AnotherComponent 不会更新,因为根据给定的参数,它会显示一件事或另一件事。

也许我需要使用MyComponent的一些生命周期?

我发现 param 那个 接受它是不变的,总是一样的。