本机反应:状态改变后不调用渲染函数

时间:2015-12-24 13:06:21

标签: javascript asynchronous reactjs async-await react-native

我有一个应用程序,我试图了解AsyncStorage。我正在使用此Amazing library简化了实际的AsyncStorage实施。

该应用的流程是 -

  1. 我设置了初始状态arr : [],

  2. 在componentDidMount()中,我调用userTest()并获得承诺。

  3. 我正在尝试在stateSetting()

  4. 中设置状态

    我的观察 -

    1. stateSetting()我不确定,是否设置了setState(请参阅下面的日志)。

    2. render()函数在setState之后没有执行。

    3. [如果您想执行代码,将其放在Github上,将其克隆到调试或拉取请求,那就太棒了]

      代码 -

      'use strict';
      
      var React = require('react-native');
      var reactNativeStore = require('react-native-store');
      var {
        AsyncStorage,
        PickerIOS,
        Text,
        AppRegistry,
        View
      } = React;
      
      var reactNativeStore = require('react-native-store');
      
      var RNStorage = require('./RNStorage');
      
      var userArr = 
      [
          { name: 'j', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 3, location: { name: 'USA', coords: { lat: 123, lng: 123 }  } },
          { name: 'a', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 4, location: { name: 'USA', coords: { lat: 123, lng: 123 }  } },
          { name: 'v', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 1, location: { name: 'USA', coords: { lat: 123, lng: 123 }  } },
          { name: 'a', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 2, location: { name: 'USA', coords: { lat: 123, lng: 123 }  } },
          { name: 's', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 1, location: { name: 'EU', coords: { lat: 423, lng: 123 }  } },
          { name: 'c', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 1, location: { name: 'EU', coords: { lat: 423, lng: 123 }  } },
          { name: 'r', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 7, location: { name: 'EU', coords: { lat: 423, lng: 123 }  } },
          { name: 'i', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 9, location: { name: 'Outer Space', coords: { lat: 999, lng: 999 }  } },
          { name: 'p', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 4, location: { name: 'InterGalatic Space', coords: { lat: 9001, lng: 42 }  } },
          { name: 't', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 999, location: { name: 'Outside', coords: { lat: -1, lng: 0 }  } },
      ];
      
      var differentArr = 
      [
          { name: 'j', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 1, location: { name: 'USA', coords: { lat: 101, lng: 101 }  } },
          { name: 'a', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 2, location: { name: 'USA', coords: { lat: 101, lng: 101 }  } },
          { name: 'v', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 3, location: { name: 'USA', coords: { lat: 101, lng: 101 }  } },
          { name: 'a', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 4, location: { name: 'USA', coords: { lat: 101, lng: 101 }  } },
          { name: 's', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 5, location: { name: 'EU', coords: { lat: 423, lng: 101 }  } },
          { name: 'c', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 6, location: { name: 'EU', coords: { lat: 423, lng: 101 }  } },
          { name: 'r', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 7, location: { name: 'EU', coords: { lat: 423, lng: 101 }  } },
          { name: 'i', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 8, location: { name: 'Outer Space', coords: { lat: 999, lng: 999 }  } },
          { name: 'p', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 9, location: { name: 'InterGalatic Space', coords: { lat: 9001, lng: 42 }  } },
          { name: 't', img: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png', price: 10, location: { name: 'Outside', coords: { lat: -1, lng: 0 }  } },
      ];
      
      var user = new RNStorage(userArr);
      var diff = new RNStorage(differentArr);
      
      
      async function userTest () {
          console.info('=== start react-native-store USER test! ===')
          await user.destroyModel();
          await user.init();
          await user.findTest();
          await user.findByIdTest();
          var returnVal = await user.updateTest();
          console.log("returnVal = "+JSON.stringify(returnVal));
          await user.updateByIdTest();
          await user.removeTest();
          await user.removeByIdTest();
          console.info('=== react-native-store USER test complete! ===')
          return returnVal;
      }
      
      async function diffTest () {
          console.info('=== start react-native-store DIFF test! ===')
          await diff.destroyModel();
          await diff.init();
          await diff.findTest();
          await diff.findByIdTest();
          var returnVal = await diff.updateTest();
          console.log("returnVal = "+JSON.stringify(returnVal));
          await diff.updateByIdTest();
          await diff.removeTest();
          await diff.removeByIdTest();
          console.info('=== react-native-store DIFF test complete! ===')
      }
      
      //diffTest();
      
      
      
      var AsyncStorageExample = React.createClass({
      
          getInitialState: function () {
              console.log("getInitialState");
              return {
                  arr : [],
              }
          },
      
          componentDidMount: function () {
              console.log("componentDidMount");
      
              var retval = userTest();
              console.log("componentDidMount retval"+retval);
              retval.then(function (argument) {
                  console.log("argument"+JSON.stringify(argument));
                  this.stateSetting(argument);
              });
          },
      
          stateSetting: function(arrval) {
              console.log("stateSetting");
              this.setState({
                  arr : arrval,
              });
              console.log("value = "+this.state.arr);
          },
      
          render : function() {
              console.log("render");
              console.log("render - value of this.state.arr"+JSON.stringify(this.state.arr));
              return (
                <View>
                  {this.state.arr.map(arr =>
                    <Text key={arr.name}>
                      &bull; {arr.name}
                    </Text>
                  )}
                </View>
              );
        },
      
      });
      
      AppRegistry.registerComponent('AsyncStorageExample', () => AsyncStorageExample);
      

      完整代码 - GITHUB

      日志 -

      12-24 18:29:06.516 18964-7584/com.asyncstorageexample I/ReactNativeJS: Running application "AsyncStorageExample" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
      12-24 18:29:06.541 18964-7584/com.asyncstorageexample I/ReactNativeJS: getInitialState
      12-24 18:29:06.546 18964-7584/com.asyncstorageexample I/ReactNativeJS: render
      12-24 18:29:06.546 18964-7584/com.asyncstorageexample I/ReactNativeJS: render - value of this.state.arr[]
      12-24 18:29:06.551 18964-7584/com.asyncstorageexample I/ReactNativeJS: componentDidMount
      12-24 18:29:06.556 18964-7584/com.asyncstorageexample I/ReactNativeJS: === start react-native-store USER test! ===
      12-24 18:29:06.556 18964-7584/com.asyncstorageexample I/ReactNativeJS: componentDidMount retval[object Object]
      12-24 18:29:06.606 18964-7584/com.asyncstorageexample I/ReactNativeJS: 0. init data
      12-24 18:29:06.886 18964-7584/com.asyncstorageexample I/ReactNativeJS: 1. find method:
      
      ALL ASYNCSTORAGE METHODS GET EXECUTED - CROPPING LOGS
      
      12-24 18:29:07.176 18964-7584/com.asyncstorageexample I/ReactNativeJS: === react-native-store USER test complete! ===
      12-24 18:29:07.176 18964-7584/com.asyncstorageexample I/ReactNativeJS: argument[{"name":"a","img":"https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png","price":0,"location":{"name":"USA","coords":{"lat":123,"lng":123}},"_id":2},{"name":"a","img":"https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png","price":0,"location":{"name":"USA","coords":{"lat":123,"lng":123}},"_id":4},{"name":"c","img":"https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/House.png","price":0,"location":{"name":"EU","coords":{"lat":423,"lng":123}},"_id":6}]
      

      我做错了什么?请指导/帮助我。

1 个答案:

答案 0 :(得分:2)

问题在于范围

retval.then(function (argument) {
    console.log("argument"+JSON.stringify(argument));
    this.stateSetting(argument);
});

promise中this的值不再是组件。您需要绑定函数,或使用闭包。

retval.then(function (argument) {
    console.log("argument"+JSON.stringify(argument));
    this.stateSetting(argument);
}.bind(this));

<强> OR

var self = this;
retval.then(function (argument) {
   console.log("argument"+JSON.stringify(argument));
   self.stateSetting(argument);
});