Question

让我解释一下。我有一个名为“ Ranking”的屏幕，其中有赛车手及其位置的列表。每行是一个称为“ RankingItem”的子组件。在排名屏幕中，我所有数据都来自全局状态（Redux），并使用props传递给子组件。一切正常。现在，在此子组件（排名中的每个项目）中，我确实添加了一个进度条。该进度条的范围是0到1，必须与0到中等时间（毫秒）相同。例如：我的平均时间是123566。进度条的值为0 = 0和1 = 123566。主要问题是如何更新/管理该进度条？我知道我必须使用setInterval来更新组件状态，以便进度会改变。我正在尝试在此行组件（RankingItem）中执行此操作，但是有时会同时更新两个进程，并且不应该每5秒更新一次行（在我的模拟中）。另外，当racert再走一圈时，应该重新设置此进度，而我不知道该怎么做，因为我认为我可以使用的唯一功能将在以后淘汰。

我的redux状态为：

{
tx_id: 2,
last_time: 1234,
average_time: 1234,
laps: {{...},{...}.{...}]
}

当圈数改变（增加）时，我需要“重置”进步棒，并使用“平均值”进行进步的最小/最大。我在这里迷路了。

更多信息：我有一个“全局” TCP组件，当到达新的圈时，它将调用减速器将此圈添加到全局“竞赛”状态，该状态是所有赛车手的数组（上面的示例）。 / p>

补码：这是我的“ RankingItem”对象：

import React, { Component } from "react";
import {View} from 'react-native';
import { Text, ListItem } from 'native-base';
import {getPilotName,msToTime} from '../../../util/util';
import {translate} from '../../../i18n';
var i18n_opt = {scope: "ranking"};
import { Grid, Row, Col } from "react-native-easy-grid";
import ProgressBar from 'react-native-progress/Bar';

import styles from "../styles";

class RankingItem extends Component {

    constructor(props) {
        super(props); 
        this.state = [];

    }

    componentDidMount() {

        setInterval(() => {
            this.setState(this._updatePg());
        }, 1000)

    }

    componentDidUpdate(previous) {

        const tx_id = this.props.data.item.tx_id;
        var tmp = this.state;
        if (!tmp[tx_id]) {
            tmp[tx_id] = {
                pg: 0,
                step: 0.01,
                laps: 0,
                last_time: 0
            }
        }

        if (previous.data.item.laps.length != this.props.data.item.laps.length) {
            tmp[tx_id].pg = 0;
            tmp[tx_id].laps = this.props.data.item.laps.length;
            tmp[tx_id].last_time = this.props.data.item.last_time;

            this.setState(tmp);
        }


    }

    _updatePg() {

        const item = this.props.data.item;
        const tx_id = item.tx_id;

        var tmp = this.state;
        if (tmp[tx_id]) {

            tmp[tx_id].pg = tmp[tx_id].pg + tmp[tx_id].step;

        }

        this.setState(tmp);        

    }





    render() {
        const {data} = this.props;        
        const {position,tx_id,total_time,last_time,best_lap,best_time,diff,laps} = data.item;
        const pg =  this.state[tx_id] ?  this.state[tx_id].pg : 0;

        return (
            <ListItem onPress={() => this.props.navigation.navigate("PersonalRank",{tx_id})} NoIndent style={{width: '100%', marginTop: 0, paddingTop: 0, marginBottom: 0, paddingBottom: 5, marginLeft: 0, paddingLeft: 0, paddingRight: 0, marginRight: 0}}>
                <Grid>
                    <Col size={10}><Text>#{position}</Text></Col>
                    <Col size={90}>
                        <Row>
                            <Col size={67}><Text style={{alignSelf: 'flex-start', fontWeight: 'bold', fontSize: 14}}>{getPilotName(tx_id)}</Text></Col>
                            <Col size={33}><Text style={{fontSize: 10, alignSelf: 'flex-end', marginRight: 3}}>{translate('total_time',{...i18n_opt})}: {msToTime(total_time)}</Text></Col>
                        </Row>
                        <Row>
                            <Col><Text style={styles.itemHeaderText}>{translate('laps',{...i18n_opt})}</Text></Col>
                            <Col><Text style={styles.itemHeaderText}>{translate('last_lap',{...i18n_opt})}</Text></Col>
                            <Col><Text style={styles.itemHeaderText}>{translate('best_lap',{...i18n_opt})}</Text></Col>
                            <Col><Text style={styles.itemHeaderText}>{translate('best_time',{...i18n_opt})}</Text></Col>
                            <Col><Text style={[styles.itemHeaderText,styles.itemAlignRight, {marginRight: 5}]}>{translate('diff',{...i18n_opt})}</Text></Col>
                        </Row>
                        <Row>
                            <Col><Text style={styles.itemValueText}>{laps.length}</Text></Col>
                            <Col><Text style={[styles.itemValueText, {fontWeight: 'bold'}]}>{msToTime(last_time)}</Text></Col>
                            <Col><Text style={styles.itemValueText}>{best_lap}</Text></Col>
                            <Col><Text style={[styles.itemValueText, { color: '#90db18', fontWeight: 'bold' }]}>{msToTime(best_time)}</Text></Col>
                            <Col><Text style={[styles.itemValueText,styles.itemAlignRight, {marginRight: 5}]}>{diff}</Text></Col>
                        </Row>
                        <Row>
                            <Col><ProgressBar style={styles.progress} progress={pg} width={null} /></Col>
                        </Row>
                    </Col>
                </Grid>
            </ListItem>
        );

    }
}


export default RankingItem;

更多更新：这就是发生的情况。有时，即使只收到一圈，也不止一个进度“重置”（我100％确保每5秒只收到一圈）。

Answer 1

我通过向“种族”存储中添加名为“ pg”（进度）的属性并每1秒调用一个reducer来解决此问题。该化简器为“ race”化简器中的所有iten更新“ pg”属性。一切正常。

一段时间后，如何更新进度条，如果收到一些数据，如何重置？

1 个答案: