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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com