Question

我到处寻找一个合适的解决方案，但我找不到一个！当我打开我的模拟器＆amp;当我的应用程序加载后，它会运行两次渲染方法。这意味着我只从我的redux-store获得InitialState。

以下是我的开始脚本：

"scripts": {
    "android-setup-port": "adb reverse tcp:8081 tcp:8080",
    "start": "env NODE_ENV=DEV rnws start --hostname localhost",
    "build": "env NODE_ENV=PRODUCTION rnws bundle",
    "test": "eslint src",
    "debugger-replace": "remotedev-debugger-replace --hostname localhost --port 5678",
    "remotedev": "npm run debugger-replace && remotedev --hostname localhost --port 5678"
  },

这是我的布局：

  componentWillMount() {
    this.props.actions.fetchalbum("1");
  }

  render() {
    var album = this.props.album;

    console.log("\n\nlayout_____", album); // THIS IS PRINTED OUT TWICE

    // Create the feed
    var albumObj = [];

    for (var i = 0; i < album.albums.length; i++) {
      feedObj.push(
        <View key={i}>
          <AlbumComp post={ album.albums[i] }/>
        </View>
      );
    }

    return (  
      <ScrollView>
        { albumObj }
      </ScrollView>
    )
  }
};

当我打开应用程序时，它控制台。记录相册的初始状态＆amp;然后再次使用fetch方法从API检索的新状态。

我有什么想法可以解决这个问题吗？

Answer 1

应用程序的行为完全正确 - 它在安装组件时呈现一次，然后在异步调用再次更新状态后再次呈现。

您无法阻止应用程序根组件的初始呈现。但是，您可以做的是通过例如处理渲染方法中的未加载状态。在加载数据之前显示加载微调器。也许是这样的事情：

render() {
  var album = this.props.album;
  if (!album) {
    return <ActivityIndicatorIOS />;
  }

  console.log("\n\nlayout_____", album);

  //...
}

React-native渲染方法在加载时运行两次

1 个答案: