Question

我正在使用react-native@0.60.5和react-native-router-flux@4.0.6。我正在尝试从selectItems组件跳回到newCollection，这是一种形式。

我创建了一个组件，该组件呈现带有复选框的项目列表。当用户点击 Done （完成）按钮时，我使用setParams将选定的项目作为道具传递-就像这样：

 // SelectItems.js
 this.props.navigation.setParams({
   rightTitle: 'Done',
   onRight: () =>
     Actions.jump('newCollection', {
       selectedItems: this.state.taggedItems,
     }),
 });

这很好，并且当newCollection组件呈现时，我可以在表单中显示this.props.selectedItems中的选定项目列表。

安装组件时，我需要使用this.props.selectedItems来调用动作创建者。

这是动作：

      // NewCollection.js

      // Map the items selected in the the `selectItems` component
      // and invoke an action

      var fetchTaggedItems = new Promise((resolve, reject) => {
        this.props.taggedItemsFetch(this.props.taggedItems.map(x => x.uid));
        resolve(this.props.matchingOutfits);
      });

      fetchTaggedItems.then(x => {
            console.log(x);
            alert('done!');
          });

现在，我的理解是，组件在收到这些新道具时应该重新安装，但事实并非如此。使用componentDidMount中的日志，我看到它仅安装在第一个条目上。

我尝试了上面的代码：

使用Actions.refresh()代替Actions.jump()-什么也没发生
使用static onEnter()更新组件状态并强制重新安装-无法访问this.state
从render()-无限循环中调用动作创建者
在状态中设置布尔值calledActionCreator来防止无限循环-不起作用 —将this.props中的prevProps与componentDidUpdate()比较—错误：超出最大更新深度

我开始认为这是React Native Router Flux的错误。

Answer 1

希望此代码对您有帮助，这是我项目的一部分，我需要强制更新道具更改，在此代码中，您可以触发哪些道具更改以及它必须执行的操作。注意：使用setState时，组件将呈现。在此生命周期中，如果道具更改，则调用setState重新渲染组件。

        if (this.props !== prevProps) {
            this.setState({
               // do somethings
            })
        }
    }

Answer 2

好的，因此，在进行大量的挖掘和实验之后，我找到了一个可行的解决方案（至少在表面上）。

在这里：

// NewCollection.js
  static onEnter() {
    Actions.refresh({key: Math.random()});
  }

使用普通的Actions.refresh()重新安装组件似乎没有任何效果。提供随机密钥作为道具似乎会强制进行更新。

我确定这不是最优雅的解决方案，但目前看来仍然可行。

强制组件重新安装新的道具

2 个答案: