我有App.js文件，它是我的应用程序的根目录（ios和android都对其引用）。
在调用render方法AsyncStorage之前，我有一个需要保存的值app.js。
问题在于，async现在太晚了，我无法获得那个价值。
class App extends React.Component {
constructor(props) {
super(props);
this.init()
}
async init() {
try {
const value = await AsyncStorage.getItem('@myPoorValue:key');
if (value !== null){
...
}
} catch (error) {}
}
}
...
render (...
我希望我能很好地解释我的问题。
我知道没有办法使它同步（我想这样），但是不知道在这种情况下该怎么做。
为了更好地解释它，我使用了I18n手动设置I18n.locale为某些值的方式，其他组件在手动设置之前获得了默认值。
请注意，我也使用redux，并将选定的值传递给它。
我重构了一个从ES5到ES6的React类,现在当我点击一个调用按钮时,行开头this.state.dispatch(logIn(this.state.logIn))的初始this值为null.超级怪异.
这是我的班级:
class Home extends Component {
constructor(props) {
super(props);
this.state = {
panelIsOpen: false,
registration: {},
login: {},
};
}
signUp() {
this.props.dispatch(signUp(this.state.registration));
this.setState({
registration: {},
});
}
logIn() {
debugger; // this is `null here`
this.props.dispatch(logIn(this.state.login));
this.setState({
login: {},
});
}
togglePanel(e) {
this.setState({ panelIsOpen: !this.state.panelIsOpen} );
}
render() {
const {elements} = this.props;
const {registration, login} = this.state;
return (
// some stuff
);
}
};
Home.propTypes = {
elements: React.PropTypes.array,
dispatch: React.PropTypes.func, …我正在学习JS,我有类似的东西.
//all inside folder reducers
//reducer1.js
export default reducer1
//reducer2.js
export default reducer2
//index.js
import reducer1 from './reducer1'
import reducer2 from './reducer2'
//then combine reducer
export default index
//outside folder reducers
import reducer from './reducers'
既然./reducers只是一个文件夹,里面有3个导出默认的3个文件,我不明白这是怎么回事？它如何知道将导入文件夹中的哪个导出默认值？
谢谢.
我正在使用这个入门套件,下面的代码可以在这个fork上找到.
柜台组件:
export const Counter = (props) => (
<div style={{ margin: '0 auto' }} >
<h2>Counter: {props.counter}</h2>
<button className='btn btn-default' onClick={props.double}>
Double (Async)
</button>
</div>
)
Counter.propTypes = {
counter : React.PropTypes.number.isRequired,
double : React.PropTypes.func.isRequired,
increment : React.PropTypes.func.isRequired
}
export default Counter
而容器组件:
import { connect } from 'react-redux'
import { increment, double } from '../modules/counter'
import Counter from '../components/Counter'
const mapDispatchToProps = {
increment : () => increment(1),
double: () => double()
}
const …我在单独的文件夹中有两个reducer,用于与此类似的结构中的单独组件:
index.js
/componentOne
|_ componentOne.js
|_ componentOneActionCreator.js
|_ componentOneReducer.js
/componentTwo
|_ componentTwo.js
|_ componentTwoActionCreator.js
|_ componentTwoReducer.js
这些Reducers中的每一个都在应用程序中单独工作 - 当我createStore进入index.js(他们import进入)时 - 但如果我尝试使用它们combineReducers(),它们的功能都不起作用(但不会打破UI).我认为这与州有关 - 更多代码供以下参考:
index.js
const rootReducer = combineReducers({
componentOneReducer,
componentTwoReducer
});
let store = createStore(rootReducer, applyMiddleware(thunk))
componentOneReducer
export default(state = {}, payload) => {
let newState = JSON.parse(JSON.stringify(state));
switch (payload.type) {
case 'REQUEST_DATA':
newState.isLoading = true;
return newState;
case 'RECEIVE_DATA':
newState.isLoading = false;
newState.pageData = payload.payload;
newState.pageName = payload.payload.pageName;
return newState
default: …我正在关注此链接的教程:http://www.thegreatcodeadventure.com/react-redux-tutorial-part-ii-react-router-and-container-components/
但是当handleSubmit()函数被触发时我得到一个错误:
错误:操作必须是普通对象.使用自定义中间件进行异步操作.
但我使用redux-thunk作为中间件.有什么遗失的吗？我正在使用Antd作为UI框架.
零件
import React, { Component } from 'react';
import compose from 'recompose/compose';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as sessionActions from './actions/sessionActions';
const FormItem = Form.Item;
class Login extends Component {
constructor(props){
super(props);
this.state = {credentials: {username: '', password: ''}};
this.handleSubmit = this.handleSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(event) {
const field = event.target.name;
const credentials = this.state.credentials; …我正在使用redux向导表单进行编辑,其中我在向导中的每个页面的componentDidMount中加载数据.但是,当我更新值并转到下一页时,更新的值不会在第二种形式中重新连接,而如果我来到上一页,它会加载初始值而不是更新的值.任何人都可以告诉我我的代码有什么问题:
第一表格:
componentDidMount() {
const users = this.props.users;
let user = {};
user = users[this.props.userID];
this.setState({file: user.profilePicture});
this.props.initialize(user);
console.log('user is', user);
}
render() {
const { handleSubmit } = this.props;
const age = (value) => (value == null ? '' : this.state.age);
return (
<form onSubmit={handleSubmit}>
<Col sm="12">
<Card className="card-border">
<CardBody>
<FormGroup row>
<Col xs="12" lg="2">
<img
src={this.state.file}
style={{width: 125, height: 125}}
className="img-avatar"
/>
</Col>
<Col xs="12" lg="10">
<Field
type="file"
id="file-input"
name="image"
accept="image/*"
component={ImageUpload}
label="Upload User Image *"
validation="fieldRequired"
className="fileLoader" …我试图了解reactjs中的redux是什么,但对我来说还不清楚.即使没有redux,反应仍然有效,那么redux在reactjs中的用途是什么
我有一个像这样的状态对象:
{
news: {
news: [
{
id: 1,
name: 'test1'
},
{
id: 2,
name: 'test2'
},
{
id: 3,
name: 'test3'
}
]
}
]
}
现在,我正在制作一个Ajax请求并得到我的响应:
[
{
id: 4,
name: 'test4'
},
{
id: 5,
name: 'test5'
},
{
id: 6,
name: 'test6'
}
]
我不想改变状态,所以在我的Reducer中,如何合并这两个值,以便最终输出如下:
{
news: {
news: [
{
id: 1,
name: 'test1'
},
{
id: 2,
name: 'test2'
},
{
id: 3,
name: 'test3'
},
{
id: 4,
name: 'test4'
},
{ …在使用倒数计时器时，我希望能够在按下按钮时重新开始倒数计时，但是，由于没有得到任何反馈，我认为该按钮不起作用。有人能指出我正确的方向吗？下面是我要实现的精简示例代码。
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
timer: 10,
timesup: false,
timing: true,
showWelcome: true,
};
}
componentDidMount() {
this.clockCall = setInterval(() => {
this.decrementClock();
}, 1000);
}
startTimer = () => {
this.setState({
timing: true,
timer: 30,
showWelcome: false
})
}
decrementClock = () => {
this.setState((prevstate) => ({
timer: prevstate.timer - 1
}), () => {
if (this.state.timer === 0) {
clearInterval(this.clockCall)
this.setState({
timesup: true,
timing: false,
showWelcome: false,
})
} …react-redux ×10
reactjs ×10
javascript ×5
redux ×4
react-native ×3
redux-thunk ×3
ecmascript-6 ×2
arrays ×1
asyncstorage ×1
redux-form ×1