- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个应用程序,我试图在其中理解 AsyncStorage。我正在使用这个Amazing library这简化了实际AsyncStorage实现。
应用程序的流程是-
我设置初始状态arr:[],
在 componentDidMount() 中,我调用 userTest()
并获得 promise 。
我正在尝试在 stateSetting()
我的观察-
在 stateSetting()
中,我不确定 setState 是否已设置(请参阅下面的日志)。
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}>
• {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/
我需要在每个渲染帧完成后拍摄屏幕截图,但我发现某些屏幕截图是重复的,所以我想知道是否可以在渲染完成之前保存屏幕截图。因此... renderer.render() 会阻塞直到完成渲染吗? 如果没有,有
web.py 骨架代码中的“render._keywords['globals']['render'] = render”是什么意思? http://webpy.org/skeleton/0.3 最佳
所以在我的 Nuxt universal-mode 应用程序中,我有时会出现错误: vue.runtime.esm.js:620 [Vue warn]: The client-side rendere
我想创建一个 portal-like effect使用 Bevy . Unity 似乎有一个 render texture实现这一目标。 有没有办法在 Bevy 中做同样的事情?如果没有, futur
我有一个看起来像这样的组件(非常简化的版本): const component = (props: PropTypes) => { const [allResultsVisible, setA
编辑:我调整了代码,但问题仍然存在。见下文 我有这个 p:selectOneRadio : 而这个 p:radioButton : 和 AData包含其
为了渲染部分我可以使用 render 'partial_name' 或 render partial: 'partial_name' 我开始知道 render 是 render partial 的简写
我注意到文章中的一些地方使用了 React.render() 和一些地方 ReactDOM.render()。这两者有什么具体区别吗? 最佳答案 这是 0.14 中引入的最新更改。他们将 React
我的代码是这样的: function render() { renderer.render( scene, camera ); renderer.clear(); } 我想知道为什么它
我目前正在实现 useSWR 以便从我的 express 和 mongo-db 后端获取数据。我能够从数据库中成功获取数据没问题。以下是我用来实现此目的的代码: ```//SWR method for
我只有在按照 React native - "this.setState is not a function" trying to animate background color? 的建议合并了 u
所以我有一个大的纹理,被分成 64x64 block 。 我使用将其加载到 LibGDX texture = new Texture("texturemap.png"); regions = Text
我对放置 @Scripts.Render 和 @Styles.Render 的位置感到很困惑。理想情况下,我会将它们全部放在 head 部分中,但出乎意料的是,例如 @Scripts.Render("
我正在尝试使用 jamon 来收集使用 Tapestry 的网站的统计信息(呈现网页的时间)。 我怎样才能拥有 服务器收到请求时执行的方法,即渲染开始时? 响应全部发送完毕,即渲染结束时执行的方法 ?
在我的 React 应用程序中,我想要渲染一个 prop 值,但直到渲染完成后更新 props 后它才存在。 this.props.users 是一个对象,因此我使用 Object.keys() 转换
我正在使用 React 的钩子(Hook),我希望有一个从数据库中检索到的值作为初始值。但是,我收到以下错误: Invariant Violation: Invariant Violation: Re
我正在尝试按照以下代码将多个场景包含到单个 webgl 渲染器中: renderer.render(scene1, camera); renderer.render(scene2, camera);
我在我的 xhtml 页面中使用此代码,当我运行应用程序时,元描述仍在呈现。我想根据某些条件使用元描述标签。主布局: ..........
我正在使用react-native-render-html来渲染html。renderers方法允许我提供自定义函数来呈现特定标签。不过,我想使用源代码中的原始内部 HTML 将子组件替换为我的自定义
我有一个网格,可以渲染可变高度的卡片。 为了获取卡片的高度,我将卡片渲染在 ReactHeight 中。 ( https://github.com/nkbt/react-height ),这让我可以在
我是一名优秀的程序员,十分优秀!