Update child component when state changes

[brianlaw033]

Any idea how can I update the child component when state changes? the numbers arent changing when the state changes

[dkaufhold]

I am currently facing the same problem. I have this component:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import SortableGrid from 'react-native-sortable-grid'

import AddPhoto from '../components/AddPhoto'

class ImageGrid extends Component {
  static propTypes = {
    pressAddPhoto: PropTypes.func.isRequired,
    deleteImage: PropTypes.func.isRequired,
    orderImages: PropTypes.func.isRequired,
    imageFields: PropTypes.array.isRequired,
    images: PropTypes.object.isRequired,
  }
  render () {
    return (
      <SortableGrid
        itemsPerRow={4}
        onDragRelease={itemOrder => this.props.orderImages(itemOrder.itemOrder)}
        doubleTapTreshold={300}
      >
        {this.props.imageFields.map((fieldname, index) =>
          <AddPhoto
            key={index}
            onTap={() => this.props.pressAddPhoto()}
            onDoubleTap={() => this.props.deleteImage(index)}
            source={this.props.images[fieldname]}
          />,
        )}
      </SortableGrid>
    )
  }
}

export default ImageGrid

What should happen

When tapping an item in the grid once, it opens the camera roll. I select an image and the image is saved. Through saving the new image in the parent component, the "images" prop updates. The image should be visible in the grid.

What actually happens

The state change is successful, the prop is updated, but the image is not visible.

What I've tried

I replaced the SortableGrid component with a View and when the app hot reloads, it instantly shows the images as it's supposed to. When I put SortableGrid back (and it re-renders again), it does show the right images still. I tried to call forceUpdate() on the ImagedGrid component, on the SortableGrid and on the AddPhoto components, but it didn't help.

[dkaufhold]

Never mind. It works when installing the latest commit! 👍

FYI: @brianlaw033

[Wowoy]

I have tried, but it didn't work.Could you tell me how you did it ?@dkaufhold

[Wowoy]

So have you solved this problem?@brianlaw033

[dkaufhold]

@Wowoy npm install --save git://github.com/ollija/react-native-sortable-grid.git will install the latest commit on the default branch.

[Wowoy]

Ok,it works.Thank you very much!@dkaufhold

[Yandamuri]

has the latest commit been merged into master?

[fairySusan]

不要用index 做key，就解决，但是没有删除动画