子組件未使用新道具進行更新

Question

我在讓子組件更新新道具時遇到問題。 我正在從全局狀態中刪除一個項目，並且成功。 但是，當該項目被刪除時，我希望該項目不再顯示。 它仍在顯示，但是如果我要移到另一個屏幕然后返回，它就消失了。 我可能在這里想念的任何想法嗎？

謝謝！！

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類中，您無需再次設置道具。 只需從道具中接收即可，如下所示：

render (

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

Answer 2

渲染是根據除構造函數以外未更新的狀態發生的。 當prop從父對象更新時，它不會反映在狀態中。 添加componentWillReceiveProps方法以接收新道具並更新狀態，這將導致呈現新數據

但更可取的是，如果初始化后狀態沒有以任何方式更改，請直接使用prop本身進行渲染，這將解決此問題