Question

当我的应用程序启动时，我加载一个名为ListComponent的组件，它将从服务器获取所有项目列表并显示它们是一个listView。我有一个不同类别的sideMenu。如果用户选择一个类别，则通过stackNavigator再次调用ListComponent，但使用不同的URl。在ListComponent我的代码看起来像

class ListComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }

componentDidMount() {
this.requestUrl(allItemsUrl)
}

componentWillUpdate(){
  const params = this.props.navigation.state.params;
if(params.id == '1'){
    this.requestUrl(urlCategory1);
  }else if (params.id == '2'){
   //.....
  }
}

render() {

    if (this.state.isLoading) {
      return (
        <View style={{flex: 1}}>
          <ActivityIndicator style={styles.activity}/>
        </View>
      );
    }

// show the list with the selected category data

每次从菜单项中选择新类别时，都会调用

componentWillUpdate()。问题是，当调用componentWillUpdate时，会请求数据，然后再次调用render来呈现新数据，这将再次调用componentWillUpdate并创建无限循环。但是我没有弄清楚要使用什么而不是componentWillUpdate来确保只有一次从stackNavigator中选择类别时才会调用它。

修改：

我通过在注释中应用建议的解决方案并比较old和nextProp来停止无限循环。我还将componentWillUpdate更改为componentDidUpdate，但现在我开始收到警告

警告：在下一个版本中，将呈现空节标题。在在此版本中，您可以使用＆＃39; enableEmptySections＆＃39;标志呈现空节标题

你知道这是什么问题吗？

Answer 1

您可以比较componentDidUpdate中的道具。如果类别等于旧类别将不做任何事情。来自Dimitri Bosteels的回答

componentWillUpdate(prevProps, prevState){
  const params = this.props.navigation.state.params;
  if(prevProps.navigation.state.params.id === params.id) {
      return; //do nothing
  }
  if(params.id == '1'){
    this.requestUrl(urlCategory1);
  }else if (params.id == '2'){
   //.....
  }
}

Answer 2

在ComponentWillUpdate()返回之前，您无法更新组件
请参阅：ComponentWillUpdate
但你可以在ComponentDidUpdate做到吗？
尝试检查这两个描述组件生命周期的链接。
显然，ComponentDidUpdate()是进行网络呼叫的好地方。希望我能正确理解你的问题。

React native：在组件被编码后执行一次代码

2 个答案: