道具未传播到 children

Question

我正在努力为我们正在开发的应用程序添加滑动删除功能。由于我们没有使用外部库来处理这个问题的原因，所以我自己写了。

在我的项目中，我有一个用于保存状态的容器。我使用 setState 来更新状态，并将状态作为道具传递给这个 child 组件。在下面的组件中， componentWillReceiveProps 被调用并在它们发生时使用正确的值更新，但是 child 组件没有接收到其道具的更新。如果这没有足够的意义或者您需要查看更多代码，请告诉我。由于这是一个私人项目，我只包含了我认为相关的部分代码。

  constructor(props) {
    super(props);

    this.renderWishlistRow = this.renderWishlistRow.bind(this);
  }

  renderWishlistRow(product) {
    return (
      <WishlistRow
        item={product}
        onItemPress={this.props.onItemPress}
        onRemoveAction={this.props.onRemoveAction}
        shouldCloseRemoveButton={this.props.shouldCloseRemoveButton}
        onScrollAction={this.props.onScrollAction}
        itemPressed={this.props.itemPressed}
        onEndScroll={this.props.onEndScroll}
      />
    );
  }

然后，在渲染函数中：

return (
  <KeyboardAwareListView
    dataSource={this.props.dataSource}
    renderRow={this.renderWishlistRow}
    renderSeparator={renderCardDividerAsSeparator}
    onScrollBeginDrag={this.props.onScrollAction}
    scrollEventThrottle={16}
    onScrollEndDrag={this.props.onEndScroll}
  />
);

在此先感谢您的帮助。

编辑：我正在使用以下代码在 parent 组件中设置状态：

this.setState({
  shouldCloseRemoveButton: true,
});

我最初没有包含它，因为 componentWillReceiveProps 被调用时 parent 组件的状态发生了正确的变化。

编辑 2：我的应用程序这部分的应用程序层次结构如下：

WishlistContainer: contains the setState calls and passes as a prop: shouldCloseRemoveButton={this.state.shouldCloseRemoveButton}
    Wishlist: passes props to its child WishlistRow: shouldCloseRemoveButton={this.props.shouldCloseRemoveButton}
        WishlistRow: Continues to pass the props down as above, but componentWillReceiveProps is not called here, props are not updating at this level.

Answer 1

我不会将此标记为已回答，因为我想要一个真正的答案，而我为解决这个问题所做的工作对我来说还不够好。

也就是说，我的解决方法是将我试图传播的状态块移动到 react-redux。使用 mapDispatchToProps 设置 redux 状态以包含我需要的内容，然后使用 mapStateToProps 连接实际需要状态的组件，允许组件接收它们执行任务所需的通知。

同样，我不会选择这个作为答案 - 尽管这是我为解决问题所做的 - 因为某处发生了一些可疑的事情，我想看看是否有人知道为什么事情没有照原样工作。

编辑

自从这最初发生以来，我已经运行多次处理过这个问题。 Flatlist 上存在一个道具 - 这不是我在问题中使用的原始组件，但现在不推荐使用原始组件，并且 Flatlist 有即将提到的用于这种情况的道具 - 称为 extraData.这个特殊的道具也被监视以帮助 Flatlist 确定它是否应该重新渲染自己。

由于 ListView 已被弃用，我觉得使用 Flatlist 并确保传入 extraData 道具 - 假设你有一个不同的道具会随着列表数据的变化而变化 - 是可以接受的回答这个问题。

道具未传播到 children

Props not propagating to children

react-native

state

react-props