Question

我正在学习redux并在我的项目中实现它，但是我遇到了一个我无法解决的大问题，我已经尝试过我所发生的一切

在我的项目中我有一个菜单，当我输入菜单的第一个选项时，我加载了包含一些信息的组件列表，当点击组件时，它将我带到一个允许我扫描qr代码的新视图，当它被正确扫描我更新了redux存储，但要回到列表我没有看到所做的更改，但我必须转到菜单并返回列表以查看更改，复制完整的代码4个视图使其更容易检测到任何错误，我很感激帮助

import React, {Component} from 'react';
import {View,Text} from 'react-native';
import {Actions} from 'react-native-router-flux';
import {BtnImageText} from "../components/BtnImageText";

class GridVigilancia extends Component{

constructor(props){
    super(props);
    this.props.setHeader('MÓDULO DE VIGILANCIA');
}

componentWillReceiveProps(){
    console.log( 'here will receive props');
    this.props.setHeader('MÓDULO DE VIGILANCIA');
}

actionRouter(action, payload={}){
    switch(action){
        case 'rondas':
            Actions.rondas();
        break;
        case 'novedad':
            Actions.novedad();
        break;
        case 'correspondencia':
            Actions.correspondencia();
        break;
        case 'visitantes':
            Actions.registroVisitantes();
        break;
        case 'mensajeria':
            // Actions.novedad();
        break;
        case 'novedades':
            Actions.novedades();
        break;
    }
}

render(){
    return(
        <View style={styles.container}>
            <View style={styles.row}>
                <BtnImageText img={require('../images/buttons/icn_rondas.png')} tint='black' txt='Rondas'
                    onPress={() => this.actionRouter('rondas')}
                />
                <BtnImageText img={require('../images/buttons/icn_novedades.png')} tint='black' txt='Novedades'
                    onPress={() => this.actionRouter('novedad')}
                />
                <BtnImageText img={require('../images/buttons/icn_correspondencia.png')} tint='black' txt='Correspondencia'
                    onPress={() => this.actionRouter('correspondencia')}
                />
            </View>
            <View style={styles.row}>
                <BtnImageText img={require('../images/buttons/icn_visitantes.png')} tint='black' txt='Registro visitantes'
                    onPress={() => this.actionRouter('visitantes')}
                />
                <BtnImageText img={require('../images/buttons/icn_chat.png')} tint='black' txt='Mensajeria/Chat'
                    onPress={() => this.actionRouter('mensajeria')}
                />
                <BtnImageText img={require('../images/buttons/icn_turno-anterior.png')} tint='black' txt='Turno anterior'
                    onPress={() => this.actionRouter('novedades')}
                />
            </View>
        </View>
        );
 }

}

const styles= {
row: {
    flexDirection: 'row',
    // paddingVertical: 6,
    justifyContent: 'space-between'
},
container:{
    flexDirection: 'column',
    paddingHorizontal: 115,
    justifyContent: 'space-around',
    paddingVertical: 6,
    flex:1,
},
}

export default GridVigilancia;

第二个视图包含组件列表

import React, {Component} from 'react';
import {View,Text, ListView} from 'react-native';
import BtnRonda  from '../components/BtnRonda';
import {BtnAction}  from '../components/BtnAction';
import {connect} from 'react-redux';


class Rondas extends Component{

constructor(props) {
    super(props);
    this.props.setHeader('Rondas');
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        title: 'prue'
    };
}

componentWillMount(){
    console.log('cwm rondas');
    this.dataSource = this.ds.cloneWithRows(this.props.rondas);
}

componentWillReceiveProps(nextProps){
    console.log('cwrp rondas');
    this.dataSource = this.ds.cloneWithRows(nextProps.rondas);
    this.forceUpdate();
}

componentDidUpdate(prevProps){
    if(prevProps !== this.props){
        this.forceUpdate();
    }

}



actualizarPuntoHecho(ronda, code){
    console.log('code: '+code);
    console.log(ronda);

    let i = this.props.userData.rondas.findIndex(index => index.nombre_ronda == ronda.nombre_ronda);
    console.log('i: '+i);
    this.props.userData.rondas[i] = ronda;
    if(code != 2){
        let puntos = this.props.userData.config_puntos;
        for(let i in puntos){
            puntos[i] = {...puntos[i], leido: false};
        }
    }
}

render(){
    return(
        <View style={styles.view}>
            <View style={styles.main}>
                <View style={styles.container}>
                        <ListView contentContainerStyle={styles.list}
                        dataSource={this.dataSource}
                        renderRow={(rowData, sectionID, rowId) => 
                        <BtnRonda actualizarPuntoHecho= {this.actualizarPuntoHecho.bind(this)} style={styles.item} ronda={rowData}/>
                    }
                        />
                </View>
            </View>
            <View style={styles.footer}>
                <BtnAction txt='Atras'/>
                <BtnAction txt='Registro supervisor'/>
            </View>
        </View>
        );
 }

}

const styles= {
row: {
    flexDirection: 'row',
    paddingVertical: 6,
    justifyContent: 'space-between'
},
main: {
    flexDirection: 'row',
    flex: 5,
    paddingVertical: 3,
    justifyContent: 'space-between',
},
footer: {
    flexDirection: 'row',
    flex: 1,
    paddingHorizontal: 15,
    paddingVertical: 8,
    justifyContent: 'space-between',
    alignItems: 'center'
},
view:{
    flexDirection: 'column',
    justifyContent: 'space-around',
    flex:1,
},
container:{
    marginHorizontal: 115,
    justifyContent: 'space-around',
    flex:1,
},
list: {
    flexDirection: 'row',
    flexWrap: 'wrap'
}
}

const mapStateToProps = (state) =>{
let aux = {rondas: state.rondas.rondas}
return aux;
}

export default connect(mapStateToProps)(Rondas);

这是第三个代码和视图

import React, {Component} from 'react';
import { View, Image, Text, TouchableOpacity, Alert } from 'react-native';
import {Actions} from 'react-native-router-flux';
import moment from 'moment';
import {connect} from 'react-redux';
import * as actions from '../actions';

class BtnRonda extends Component {

constructor(props){
    super(props);
    this.state = {
        ronda: props.ronda
    };
}

componentWillMount(){
    let estado = this.defineState(this.props.ronda, this.props.ronda.puntos_hechos);
    this.setState({estado});

}


componentDidUpdate(prevProps, prevState){
    console.log(this.state.ronda);
    let newEstado = this.defineState(this.props.ronda, this.props.ronda.puntos_hechos);
    if(prevState.estado !== newEstado){
        this.setState({estado: newEstado});
    }
    if(this.props.ronda !==  prevProps.ronda){
        this.setState({ronda: this.props.ronda});
    }

}

defineState(ronda, puntos_hechos) {
    let format = 'hh:mm'
    let estate = 0;
    let time = moment(),
    beforeTime = moment(ronda.hora, format),
    afterTime = moment(ronda.hora, format).add(2,'hours');

    if (time.isBetween(beforeTime, afterTime) && puntos_hechos < 10) {
        // console.log(time.format(format)+' is between '+ ronda.hora+' y '+afterTime.format(format));
        estate = 2;
    } 
    else if(time > beforeTime && (puntos_hechos > 0 && puntos_hechos < 10)) {
        // console.log(time.format(format)+' is not between '+ ronda.hora+' y '+afterTime.format(format));
        estate = 4;
    }
    else if(time > beforeTime && puntos_hechos == 3){
        estate = 3;
    }
    else if(time > beforeTime && puntos_hechos == 0){
        estate = 5;
    }

    switch(estate){
        case 2:
            return {nombre: 'HACER RONDA', bgColor: '#f28d49', code: estate};
            break;
        case 3:
            return {nombre: 'COMPLETA', bgColor: '#415d68', code: estate};
            break;
        case 4:
            return {nombre: 'INCOMPLETA', bgColor: '#aa132d', code: estate};
            break;
        case 5:
            return {nombre: 'NO REALIZADA', bgColor: '#aa132d', code: estate};
            break;
        case 1:
        default:
            return {nombre: 'PENDIENTE', bgColor: '#878787', code: estate};
        break;
    }
}

actualizarPuntoHecho(){
    let newPunto = this.state.ronda.puntos_hechos+1;
    this.setState({ronda: {...this.state.ronda, puntos_hechos: newPunto}, estado: this.defineState(this.state.ronda,newPunto)});
}

onClick(action, payload={}){
    switch(action){
        case 'puntos':
            this.props.selectRonda(this.state.ronda);
            // Actions.puntos();
            Actions.puntos({actualizarPuntoHecho: this.actualizarPuntoHecho.bind(this)})
        break; 
        case 'no_ronda':
            Alert.alert('No es tiempo de hacer la ronda')
        break;
    }
}

render() {
    return (
        <TouchableOpacity
            onPress={() => (this.state.estado.code == 2)?this.onClick('puntos'): this.onClick('no_ronda')} style={styles.container}>
            <View style={[styles.topBox, {backgroundColor: this.state.estado.bgColor}]}>
                <Text style={styles.topText}>{this.state.ronda.nombre_ronda+this.state.ronda.puntos_hechos}</Text>
            </View>
            <View  style={[styles.Box, {backgroundColor: this.state.estado.bgColor}]}>
                <View  style={styles.innerBox}/>
                <View  style={[styles.innerBox, {backgroundColor: 'white', flex: 1}] }>
                    <Text style={styles.innerText}>{this.state.ronda.hora}</Text>
                </View>
                <View  style={styles.innerBox }>
                    <Text style={[styles.topText, {fontSize: 15, marginTop: 4}]}>{this.state.estado.nombre}</Text>
                </View>

            </View>
        </TouchableOpacity>
    );
   }
 }

 export default connect(null, actions)(BtnRonda);

 const styles = {
container:{
    alignSelf: 'flex-start',
    // height: 40,
    // alignItems: 'center',
    // padding: 5,
    // paddingHorizontal: 15,
    flexDirection: 'column',
    // flex: 1,
    width: 210,
    height: 120,
    margin: 10
},
topBox:{
    alignItems: 'center',
    backgroundColor: 'blue',
    width: 130,
    height: 30,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
},
Box:{
    backgroundColor: 'blue',
    width: 210,
    height: 90,
    borderTopRightRadius: 15,
    borderBottomRightRadius: 15,
    borderBottomLeftRadius: 15,
},
topText:{
    color: 'white',
    fontSize: 22,
},
innerBox: {
    flex: 1,
    alignItems: 'center',
},
innerText:{
    alignSelf: 'center',
    fontSize: 22,
    fontWeight: '600'
}

};

import React, {Component} from 'react';
import { View,Image, Text, TouchableOpacity, Alert } from 'react-native';
import {Actions} from 'react-native-router-flux';
import * as actions from '../actions';
import {connect} from 'react-redux';

class BtnPunto extends Component {

constructor(props) {
    super(props);
    this.state = {
        punto: {...props.punto},
    }
}

leerPunto(punto){
    if(!this.state.punto.leido){
        Actions.camera({QR: true, getQR: (qr) => {this.getQR(qr)}, getPicture: {}}); 
    }
}

getQR(qr){
    if(qr == this.state.punto.nombre_punto){
        this.setState({punto:{...this.state.punto, leido: true, indice: false}});
        this.props.leerPunto(this.state.punto);
        this.props.sumarPuntoHecho();
        // this.props.actualizarPuntoHecho();
    }
    else{
        Alert.alert('Punto incorrecto');
    }
}

render() {
    return (
        <TouchableOpacity onPress={() => this.leerPunto(this.state.punto)} style={[styles.container,{backgroundColor: (this.state.punto.leido)?'#4c6640':'#878787',}]}>
            <Image style={styles.image}
                   source={require('../images/qr_punto.png')}
            />
            <Text style={styles.text}>{this.state.punto.nombre_punto}</Text>
        </TouchableOpacity>
    );
   }
}

export default connect(null, actions)(BtnPunto);

const styles = {
container:{
    alignItems: 'center',
    width: 160,
    height: 170,
    paddingVertical: 15,
    margin: 10,
    flexDirection: 'column',
    justifyContent: 'space-between',
},
image:{
    height: 120,
    width: 120,
},
text:{
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
}
};

在四个视图中仅激活相机，如果正确，则更改redux存储中的值并更新第三个视图

问题是当我回到第二个视图时完全一样，我必须转到菜单的第一个视图并返回查看更改

注意从“Ronda 310”到“Ronda 313”

我希望当您从第三个视图返回到第二个视图时更新它，而不必转到第一个视图并重新进入第二个视图以进行更新

Redux没有更新值，直到返回并再次输入

0 个答案: