子组件未使用新道具进行更新

Question

I'm having an issue getting my child component to update with new props. I'm deleting an item from the global state and it's successful. But when the item gets deleted, I'm expecting that item to no longer show. It's still being shown but if I were to move to another screen then back, it's gone. Any idea on what I might be missing here?

Thanks!!

export default class Summary extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pickupData: this.props.pickup
    };
  }

  handleDelete(item) {
    this.props.deleteLocationItem(item);
  }

  render() {
    const pickup = this.state.pickup;

    return (
      <View>
        {pickup.map((item, i) => (
          <LocationItem
            name={item}
            onPressDelete={() => this.handleDelete(item)}
          />
        ))}
      </View>
    );
  }
}

const LocationItem = ({ onPressDelete, name }) => (
  <TouchableOpacity onPress={onPressDelete}>
    <Text>Hi, {name}, CLICK ME TO DELETE</Text>
  </TouchableOpacity>
);

------- Additional Info ------

case 'DELETE_LOCATION_INFO':
  return Object.assign({}, state, {
  pickup: state.pickup.filter(item => item !== action.action)
})

export function deleteLocationInfo(x){
  return {
    type: DELETE_LOCATION_INFO,
    action: x
  }
}

Answer 1

Your deleteLocationItem must be something like this:

deleteLocationItem(id) {
  this.setState({
   items: this.state.items.filter(item => item.id !== id)
  });
}

Then inside your Summary class you dont need to set the prop again. Just receive pickup from props like this:

render (

const { pickup } = this.props;
return(
  <View>
    { pickup.map
...

Answer 2

Render is happening based on the state which is not updated other than in constructor. When the prop updates from parent, it is not reflected in the state. Add componentWillReceiveProps method to receive new props and update state, which will cause new data to render

But more preferably, if the state is not being changed in any way after initialization, render directly using the prop itself which will resolve this issue