试图用React-Native和Redux

时间:2017-06-27 17:51:59

标签: react-native redux

我正在学习RN和Redux,但无法克服数据传递的困境。我将以下代码作为测试来更新,推送和从firebase中提取数据,但是输入文本(虽然应用于使用infoUpdate的状态)不会使其成为info对象。

我确定答案非常简单,但我是一个完整的菜鸟。

谢谢!

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { infoPull, infoPush, infoUpdate } from '../actions';
import { Card, CardSection, Button, Confirm, Input } from './common';
import { Text } from 'react-native';

class FeedbackInput extends Component {



  onButtonPress() {
    const { info } = this.props;

    //this.props.infoPush({ information });
    console.log("HERE_HERE_HERE_HERE_HERE", info, "BREAK_BREAK")
  }

  render() {
    return (
      <Card>
        <CardSection>
          <Input
            label="Name"
            placeholder="Awesome Group"
            value={this.props.info}
            onChangeText={text => this.props.infoUpdate({ prop: 'info', value: text })}
          />
        </CardSection>
        <CardSection>
          <Button onPress={this.onButtonPress.bind(this)}>
            Send Info
          </Button>
        </CardSection>
      </Card>
    );
  }
}



const mapStateToProps = (state) => {
  const { info } = state;
  return { info };
};

export default connect(mapStateToProps, { infoPull, infoPush, infoUpdate })(FeedbackInput);

这是打印输出:HERE_HERE_HERE_HERE_HERE null BREAK_BREAK

2 个答案:

答案 0 :(得分:0)

您遇到的问题是范围问题。

您必须将onPress方法与构造函数的作用域绑定在一起,如下所示:

constructor (props) {
    super(props);
    this.state = {
      //your state's initial state
    };
    this.onButtonPress = this.onPress.bind(this);
  }

否则this.props未在您的方法中定义;)

答案 1 :(得分:0)

假设infoUpdate是绑定的动作创建者,示例中的代码看起来是正确的。问题似乎在你的redux层中。

你有没有验证state.info不是null? 需要查看更多代码。