如何将变化的状态道具传递给组件？

Question

I have a state object called isEdit. And I have a list of StyledLessons (a component with functionallity that should differ if its in Edit Mode or not).

<StyledLesson title={title} subjectName={subjectName} subtitle={subtitle} isEdit={this.state.isEdit}/>

It's working fine with the default state (so I do see the expected result in the beginning if isEdit is true or false as expected) but the content doesn't change if I change my state in the parent object.

Any ideas how I could manage the child component to change on the fly?

Here is how I change my state:

this.state.isEdit ?
                            <Icon
                                name='check'
                                color={Colors.tabBarText}
                                onPress={() => this.setState({isEdit: false})}
                            />
                            :
                            <Icon
                                name='edit'
                                color={Colors.tabBarText}
                                onPress={() => this.setState({isEdit: true})}
                            />

Code of the child component:

class StyledLesson extends React.PureComponent {

    constructor(props) {
        super(props);

        this.isEdit = props.isEdit??true;
        this.state = {expanded: false};
    }

    getEditableView() {
        return (
            <View style={{flexDirection: 'row', flex: 1, alignItems: 'center', marginHorizontal: 10}}>
                <TouchableOpacity>
                    <Icon
                        name={'remove-circle'}
                        color={'#f00'}
                    />
                </TouchableOpacity>
                <TouchableOpacity style={{flex: 1}}>
                    <FlatCard>
                        <Text style={{color: '#666', fontSize: 18}}>{this.props.title}</Text>
                        <Text
                            style={{
                                fontWeight: 'bold',
                                fontSize: 35,
                                color: Colors.textColor
                            }}>{this.props.subjectName}</Text>
                        <Text style={{color: '#666', fontSize: 18}}>{this.props.subtitle}</Text>
                    </FlatCard>
                </TouchableOpacity>
            </View>
        );
    }

    getDisplayView() {
        return (
            //Normal View
            <View style={{flexDirection: 'row', flex: 1, alignItems: 'center', marginHorizontal: 10}}>
                <TouchableOpacity
                    onPress={
                        () => {
                            this.setState({expanded: !this.state.expanded});
                        }
                    }
                    style={{flex: 1}}
                >
                    <FlatCard>

                        {this.state.expanded &&
                        <Text style={{color: '#666', fontSize: 18}}>{this.props.title}</Text>
                        }
                        <Text
                            style={{
                                fontWeight: 'bold',
                                fontSize: 35,
                                color: Colors.textColor
                            }}>{this.props.subjectName}</Text>
                        {this.state.expanded &&
                        <Text style={{color: '#666', fontSize: 18}}>{this.props.subtitle}</Text>
                        }
                    </FlatCard>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            this.isEdit ? this.getEditableView() : this.getDisplayView()
        );
    }
}

export default StyledLesson;

Answer 1

this.isEdit = props.isEdit??true;

This is the issue. You are updating this property only inside the constructor. Event if the props value is changing, the property won't.

You can try to modify your render method to something like

render() {
    return (
        (this.props.isEdit??true) ? this.getEditableView() : this.getDisplayView()
    );
}