状态更改时，使用状态的自定义组件不会更新

Question

I'm currently setting a default picture source in the constructor with require:

constructor(props) {
super(props);
    this.state = {
       name: '',
       pictureSource: require('../assets/images/robot-dev.png')
    };
}

My custom component is making use of the pictureSource as a prop and my TextInput is making use of name:

<EditableRoundedImage picture={this.state.pictureSource}/>
<Text style={styles.name}>{this.state.name}</Text>

---Inside EditableRoundedImage---

constructor(props) {
   super(props);
   this.state = {
     image: this.props.picture
   };
}
<Image style={styles.roundedImage} source={this.state.image} />

In the componentDidMount lifecycle method im fetching some data and changing the pictureSource/name afterwards:

this.setState({
      name: jsonResponse.firstName + " " + jsonResponse.lastName,
      pictureSource: {uri: jsonResponse.imageUrl}
    })

*jsonResponse.imageUrl has the following content: https://ph-files.imgix.net/b5541240-7da7-4bf0-8dc2-c9e911b283f2?auto=format&auto=compress&codec=mozjpeg&cs=strip

For some reason the newly fetched picture isn't displaying in the app, but the name is. I was wondering if it had something to do with the {uri: } notation or if i'm overseeing something.

Thanks in advance!

Answer 1

you are assigning this.state.image to the image source. But you are state doesn't have a property called image . Could this be the problem?