Listview 替换状态中存储的对象不会更新视图

您可以在下面找到相关代码和屏幕截图。还有一个

简而言之，问题出在这里。我有一个列表视图。每行的日期都是动态的，基于到状态中存储的对象的映射。当我单击Cycle Dates按钮时，我将替换对象this.state.cacheTimestamps，它将更新每行的日期。至少这是我所期望的。有人能帮我理解为什么这没有发生吗

class SampleApp extends React.Component{

  constructor(props){
    super(props);
    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      dataSource: this.ds.cloneWithRows(['ABCD','EFGH','IJKL']),
      cacheTimestamps: {},
      cacheLotery: [
        {'ABCD': 'Jan 1, 1970'},
        {'ABCD': 'Jan 2, 1970', 'EFGH': 'Jan 2, 1971'},
        {'ABCD': 'Jan 3, 1970', 'EFGH': 'Jan 3, 1971', 'IJKL': 'Jan 3, 1972'},
      ],
    }

    // this.randomIntBetween.bind(this);
  }

  componentWillMount(){
     this.setState({
       cacheTimestamps: this.state.cacheLotery[this.randomIntBetween(0,2)]
     })
  }

  row( id ){
    let lastCached = (this.state.cacheTimestamps[id]) ? this.state.cacheTimestamps[id] : 'never';

     return(
        <View>
          <Text style={styles.label}>
            {id}
          </Text>
          <Text style={styles.cache}>
            {lastCached}
          </Text>
        </View>
     )
  }

  cycleDates(){
    const min = 0;
    const max = 2;
    const idx = this.randomIntBetween(min,max);

    this.setState({
      cacheTimestamps: this.state.cacheLotery[ idx ]
    }, ()=> console.log('dbug cycleDates, new index [%i] and cacheTimestamps Object is %O', idx, this.state.cacheTimestamps));
  }

  randomIntBetween(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.row.bind(this)} 
        />
        <TouchableHighlight
          onPress={ ()=>this.cycleDates() } >
          <Text style={styles.buttonTxt}>
            Cycle Dates
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
};

---

您需要在ListView中呈现箭头，并将this.state.cacheTimestamps作为道具传递

渲染{ 回来 this.cycleDates}> 周期日期 ; } 解决了

在更新setState时，我还需要更新数据源。报告也已更新

  cycleDates(){
    const min = 0;
    const max = 3;
    const idx = this.randomIntBetween(min,max);

    this.setState({
      cacheTimestamps: this.state.cacheLotery[ idx ],
      dataSource: this.ds.cloneWithRows(['ABCD','EFGH','IJKL']),
    }, ()=> console.log('dbug cycleDates, new index [%i] and cacheTimestamps Object is %O', idx, this.state.cacheTimestamps));
  }

---

斯蒂芬斯-谢谢你的回复，但我不理解你的建议。在您的示例中，您删除了renderRow函数，我认为这是一个错误，但随后添加了时间戳，可能是为了将this.props.timeStamps变量传递到renderRow函数中，但是当我在renderRow函数中插入console.logthis.props时，它返回一个值为{rootTag:1}的对象。请您打开rnplay链接并提供一个工作示例来演示您的建议好吗？您说过React-Native不是特定的，但是ListView是特定于React-Native的。我把它当作ListView是可以编辑的组件之一，renderRow放在那里。我还没试过。啊，好吧。。。哦，对不起。我可能错误地认为这是一个普遍的问题。我假设在react中传递一个对象是一样的。谢谢你的时间。顺便说一下，我认为问题是状态更新会影响渲染。你的rowid方法不会知道状态的变化。我只是找到并发布了解决方案，即更新数据源和对象引用。再次感谢！

  cycleDates(){
    const min = 0;
    const max = 3;
    const idx = this.randomIntBetween(min,max);

    this.setState({
      cacheTimestamps: this.state.cacheLotery[ idx ],
      dataSource: this.ds.cloneWithRows(['ABCD','EFGH','IJKL']),
    }, ()=> console.log('dbug cycleDates, new index [%i] and cacheTimestamps Object is %O', idx, this.state.cacheTimestamps));
  }