javascript - 子组件未使用新 Prop 更新

Question

我在使用新 Prop 更新我的子组件时遇到问题。我正在从全局状态中删除一个项目并且成功。但是当该项目被删除时，我希望该项目不再显示。它仍在显示，但如果我移动到另一个屏幕然后再返回，它就会消失。知道我在这里可能会缺少什么吗？

谢谢!!

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>
);

--------附加信息------

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

您的deleteLocationItem必须是这样的:

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

然后在您的 Summary 类中，您不需要再次设置该 Prop 。只需从这样的 Prop 中接收拾取:

render (

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