反应setState重新渲染

Question

First of all, I'm really new into React, so forgive my lack of knowledge about the subject.

As far as I know, when you setState a new value, it renders again the view (or parts of it that needs re-render).

I've got something like this, and I would like to know if it's a good practice or not, how could I solve this kind of issues to improve, etc.

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>)
    }
}

Another component

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>
            }
        )
    }
}

The intention of the code is that when I click on the span it will change the key of the state, and then the component <AnotherComponent /> should change because of its parameter.

I assured that when I make the setState, on the callback I throw a console log with the new value, and it's setted correctly, but the AnotherComponent doesn't updates, because depending on the param given it shows one thing or another.

Maybe I need to use some lifecycle of the MyComponent?

Edit

I found that the param that AnotherComponent is receiving it does not changes, it's always the same one.

Answer 1

I would suggest that you'll first test it in the parent using a simple console.log on your changeValue function:

changeValue = (newValue) => {
    console.log('newValue before', newValue);
    this.setState({
        key: newValue
    }, ()=> console.log('newValue after', this.state.key))
}

setState can accept a callback that will be invoked after the state actually changed (remember that setState is async) .

Since we can't see the entire component it's hard to understand what actually goes on there. I suspect that the newValue parameter is always the same but i can't be sure.
It seems like you're missing the props in AnotherComponent 's constructor. it should be:

 constructor (props) {
    super(props) // here
}

Try replacing the if statement with:

{this.props.param === someOptions? <div>Options 1</div>: <div>Options 2</div>}

also add this function to see if the new props actually get to the component:

componentWillReceiveProps(newProps){
    console.log(newProps);
}

and check for the type of param and someOptions since you're (rightfully) using the === comparison.

Answer 2

First, fat arrow ( => ) autobind methods so you do not need to bind it in the constructor, second re-renders occur if you change the key of the component.

Ref: https://reactjs.org/docs/lists-and-keys.html#keys