Javascript - 反应本机。调用 Render() 函数时，子组件（动态列表）不呈现答案

【问题标题】：Javascript - React Native. Child Component (Dynamic List) does not render when Render() function is calledJavascript - 反应本机。调用 Render() 函数时，子组件（动态列表）不呈现
【发布时间】：2017-12-17 12:23:31
【问题描述】：

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

每次我使用 IOS 步进器修改玩家的分数时，应用程序的状态都会根据该值发生变化。但是，包含玩家点的文本不会被修改。渲染函数被调用并且应用程序的状态没有改变，所以文本组件也应该改变。我发现，当调用渲染函数时，它会“跳过”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);

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

【问题讨论】：

标签： javascript ios reactjs react-native react-redux

【解决方案1】：

我终于解决了这个问题。 Native Base 动态列表组件基于 React Native 列表视图。列表视图仅在其道具 dataSource 更改时才会重新呈现。由于我无法更改本机基础动态列表 dataSource 属性（因为它没有直接具有此属性，所以它有一个类似的称为 dataArray 的属性，它在更改时不会产生重新渲染），我最终使用了一个反应本机列表视图组件。因此，我只需要在每次想要重新渲染时更改数据源道具，因此每一行中的项目都在刷新和指定。

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

【讨论】：