个人中心
gpt4 book ai didi

Javascript - react native 。调用 Render() 函数时，子组件(动态列表)不呈现

转载 作者：行者123 更新时间：2023-11-29 11:43:51 27 4
gpt4 key购买 nike

我正在开发一个应用程序，其中一个部分包含玩家列表。列表中的每个项目都包含玩家的姓名、他/她拥有的点数以及用于更改点数的 IOS 步进器。 See the app screen I'm talking about.

每次我使用 IOS 步进器修改播放器的点数时，应用程序的状态都会根据该值发生变化。但是，包含玩家分数的文本不会被修改。渲染函数被调用，应用程序的状态没有改变，所以文本组件也应该改变。我发现当调用 render 函数时，它会“跳过”List 组件，因此它不会被渲染，也不会调用 renderRow 函数。

当我切换到 TabBar 的第二个选项卡然后返回到第一个选项卡时，文本仅显示当前玩家的点数。在这种情况下，List 组件被渲染。

我认为这是一个非常奇怪的情况，我已经尝试了所有方法来解决它，但我还没有找到任何解决方案。我把代码留在下面。 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {View, Text} from 'react-native';
import {Container, Content, Picker, Header, Title, Subtitle, Button, Left, 
Right, Body, Icon, List, ListItem, Input } from 'native-base';
import {ferLlistaRondes, canviDeRonda, crearObjectePPR, modificarPunts, 
canviarColorPunts} from '../actions';
import SimpleStepper from 'react-native-simple-stepper';

class SetPoints extends Component {
  constructor() {
    super()
    this.modifyPunts = this.modifyPunts.bind(this);
    this.changeDeRonda = this.changeDeRonda.bind(this);
    this.renderRow = this.renderRow.bind(this)
  }

  modifyPunts(value, nomJugador) {
    this.props.modificarPunts(nomJugador, value, this.props.currentRound)
  }

  changeDeRonda(novaRonda) {
    this.props.canviDeRonda(novaRonda);
  }

  renderRow(data) {
    return(
      <ListItem icon>
        <Left>
            <Icon name = 'md-person'/>
        </Left>
        <Body>
           <Text>{data}</Text>
        </Body>
        <Right>
          <View style = {styles.pointsViewStyle}>
            <Text>
              {this.props.ObjRondaJugadorPunts[data][this.props.currentRound-1]}
            </Text>
          </View>
          <SimpleStepper
            initialValue = {this.props.ObjRondaJugadorPunts[data]
[this.props.currentRound-1]}
            stepValue = {5}
            minimumValue = {-100}
            maximumValue = {100}
            padding = {2}
            valueChanged = {(value) => this.modifyPunts(value,data)}
          />
        </Right>
      </ListItem>
    )
  }

  render() {
    return (
      <Container>
        <Content>
          <List
            dataArray={this.props.llistaFinal}
            renderRow={(data) => this.renderRow(data)}
          />
        </Content>
      </Container>
    )
  }

}

const styles = {
  subtitleStyle: {
    fontSize: 12,
    fontFamily:'Noteworthy'
  },
  pointsViewStyle: {
    paddingRight:10
  },
  pickerViewStyle: {
    alignItems: 'center'
  }
}

const mapStateToProps = (state) => {
  return {
    numJugadors: state.appRender.jugadors,
    numRondes: state.appRender.rondes,
    llistaFinal: state.appRender.llistaNomsAcabada,
    llistaRondes: state.appRender.llistaRondes,
    currentRound: state.appRender.currentRound,
    ObjRondaJugadorPunts: state.appRender.roundPlayerPointsObj,
    colorPunts: state.appRender.colorPunts
  }
}

export default connect(mapStateToProps, {ferLlistaRondes, crearObjectePPR, 
canviDeRonda, modificarPunts, canviarColorPunts})(SetPoints);

我希望你能帮我解决这个问题，谢谢!

最佳答案

我终于解决了这个问题。 Native Base 动态列表组件基于 React Native ListView 。 ListView 仅在其 prop dataSource 更改时才重新呈现。由于我无法更改原生基础动态列表 dataSource Prop (因为它没有直接拥有此 Prop ，它有一个名为 dataArray 的类似 Prop ，它在更改时不会产生重新渲染)，我最终使用了一个 react 原生 ListView 组件。因此，每次我希望它重新呈现时，我只需要更改数据源属性，因此每一行内的项目都在刷新和观察到。

对于我在一些帖子中读到的内容，native base 正在研究一种解决方案，以便提供控制其列表组件重新呈现的可能性(例如通过 dataSource prop 响应 native 报价)。

关于Javascript - react native 。调用 Render() 函数时，子组件(动态列表)不呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45068432/

27 4 0
文章推荐： postgresql - 具有多列的 Postgres 全文搜索，为什么在索引中而不是在运行时连接？
文章推荐： Python Mysql 类错误
文章推荐： arrays - Hibernate SQLQuery，如何获取数组和行对象？
文章推荐： php - 如何防止使用 PHP 和 MySQL 重新加载页面时自动将数据插入数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com