javascript - native react : render function not being called after state change

标签 javascript asynchronous reactjs async-await react-native

我有一个应用程序，我试图在其中理解 AsyncStorage。我正在使用这个Amazing library这简化了实际AsyncStorage实现。

应用程序的流程是-

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

  2. 在 componentDidMount() 中，我调用 userTest() 并获得 promise 。

  3. 我正在尝试在 stateSetting()

    中设置状态

我的观察-

  1. 在 stateSetting() 中，我不确定 setState 是否已设置(请参阅下面的日志)。

  2. render() 函数在 setState 之后不会执行。

[如果你想执行代码，它位于 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}]

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

最佳答案

问题在于范围

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

promise 中的 this 值不再是组件。您需要绑定(bind)该函数，或者使用闭包。

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

或者

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

关于javascript - native react : render function not being called after state change，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34453279/

上一篇：javascript - 向客户端发送ajax错误问题

下一篇：javascript - MVC DropDownFor 第二个选择不触发 jquery 更改事件

相关文章：

javascript - 用 ng-repeat 或 ng-model 填充文本区域，这样它就不会用迭代数据在另一个文本区域之上创建一个新的文本区域

javascript - 从 Ajax POST 到 DB 插入的带有特殊字符的字符串

javascript - 将 false 与按位 OR 运算符一起使用

javascript - 如何按行搜索并替换该行的内容

Python 网络服务器 : How to serve requests asynchronously

javascript - 关于 underscore.js 中的函数是异步还是同步的一些担忧

javascript - 如何在 for 循环中使用延迟对象

reactjs - 在云服务上使用 nestjs 服务器部署 React 应用程序以获得更好的 SEO

javascript - "props.children"如何在 React 组件上工作？

javascript - react 。条件渲染

©2024 IT工具网  联系我们