javascript - 子组件未使用新 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
  }
}

最佳答案

您的deleteLocationItem必须是这样的：

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

然后，在您的Summary类中，您无需再次设置道具。只需从道具中接收即可，如下所示：

render (

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

关于javascript - 子组件未使用新 Prop 进行更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51272970/