如何在反应组件回调后传递新的道具？

Question

I need to pass new props to child when callback was called in other child in this component. Here is a sample with setState() , which is doesn't work correctly. How i can do this? Ie bool value from onChange to isExpanded .

export default class Item extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        isExpanded: false,
    };

    this.handleChange = this.handleChange.bind(this);
}

render() {
    const {
        id,
        title,
    } = this.props;

    return (
        <ExpansionPanel onChange={this.handleChange}>
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
                <Typography>{title}</Typography>
            </ExpansionPanelSummary>

            <ExpansionPanelDetails>
                <Program isExpanded={this.state.isExpanded} id={id}/>
            </ExpansionPanelDetails>
        </ExpansionPanel>
    )
}

handleChange = (event, expanded) => {
    this.setState({isExpanded: expanded});
}

}

I expanded it, Program receive false: console log

I closed it, Program receive true: console log

Answer 1

onChange doesn't provide expanded parameter and there's no need for it, because derived state should be set with state updater function and current isExpanded value is available there:

handleChange = (event) => {
    this.setState(state => ({isExpanded: !state.isExpanded}));
}

Answer 2

Problem was in Program component, which using componentWillReceiveProps . I just used newProps and it works fine. Here is working componentWillReceiveProps from Program :

componentWillReceiveProps(nextProps) {
    const {
        id,
        program,
        fetchData,
    } = this.props;

    console.log("isExpanded: ", nextProps.isExpanded)

    if(nextProps.isExpanded && !program[id]) {
        fetchData(id);
    }
}