如何在React Native上从Firebase读取数据

时间:2018-10-22 09:27:48

标签: firebase react-native firebase-realtime-database redux axios

react-native-cli:2.0.1     反应本机:0.57.2     MacOS Mojave     Axios,Redux

我可以在控制台上从数据库中读取和写入数据,但是我无法使用这些数据,因此我的代码看起来很不错,但是如果我只想获得Title的话?还是身体?

我要创建新动作吗?还是可以更改状态以用于代码?

有人可以帮助我提取正文或标题并将其放入移动应用程序中吗?

我的动作:

export function getPosts(){
    const request = axios(`${FIREBASEBD}/posts.json`)
    .then(response => {
        let posts = [];
        for(let key in response.data){
            posts.push({
                ...response.data[key],
                id:key
            })
        }
        return posts;
    })

    return{
        type:'GET_POSTS',
        payload:request
    }
}

我的输入数据:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput, Button} from 'react-native';

import { connect } from 'react-redux';
import { addPost, getPosts, getPost } from '../Stores/actions';
import { binActionCreators, bindActionCreators } from 'redux';

class InputData extends Component {
    state = {
        title: '',
        body: ''
    }

    handleTitleInput = (title) => {
        this.setState({title})
    }

    handleBodyInput = (body) => {
        this.setState({body})
    }

    addPost = (state) => {
        console.log('====================================');
        console.log(this.state);
        console.log('====================================');

        this.props.addPost(this.state)

    }

    componentDidMount(){
        console.log('====================================');
        this.props.getPosts();
        console.log('====================================');
    }


    render() {
      return (
          <View style={style.formContainer}>
              <View style={style.InputWrapper}>
                  <Text>Title:</Text>
                  <TextInput
                      value={this.state.name}
                      style={style.input}
                      onChangeText={this.handleTitleInput}
                  />
              </View>
              <View style={style.InputWrapper}>
                  <Text>Body:</Text>
                  <TextInput
                      value={this.state.body}
                      style={style.input}
                      onChangeText={this.handleBodyInput}
                  />
              </View>
              <Button
              title="Ajouter"
              onPress={this.addPost}
              />
          </View>
      )
    }
}

const style = StyleSheet.create({
    input:{
        padding: 5,
        borderWidth: 1,
        borderColor: 'lightgrey',
        marginBottom: 5,

    }
});

function mapStateToProps(state){
    console.log('====================================');
    console.log(state);
    console.log('====================================');
    cards: state.cards
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({addPost, getPosts, getPost}, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(InputData);

感谢您的帮助。 T。

0 个答案:

没有答案