React Native：renderRow未執行

Question

在以下代碼中，當從campaignsUpdated調用setState時， render會記錄到控制台，但不會記錄到renderRow ：

var React = require('react-native'),

Bus = require('../Bus'),
styles = require('../Styles'),
CampaignsStore = require('../stores/Campaigns'),
CampaignItem = require('./CampaignItem'),

{
  Component,
  Text,
  TextInput,
  ListView,
  View,
  NavigatorIOS,
  ActivityIndicatorIOS
} = React


class CampaignList extends Component {
    constructor(props) {
      super(props)

      this.state = {
        dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
      }
    }

    componentDidMount() {
      this.addListeners()
      Bus.emit('campaigns:search', '')
    }

    componentWillUnmount() {
      this.removeListeners()
    }

    render() {
      console.log('render')
      return (
        <View style={styles.container}>
          <TextInput
            style={styles.searchInput}
            placeholder='Campaign Name'
            value={this.state.campaignName}
            onChange={this.campaignSearchChanged.bind(this)}/>
          <ListView
            dataSource = {this.state.dataSource}
            renderRow = {this.renderRow.bind(this)}/>
        </View>
      )
    }

    renderRow(campaign) {
      console.log('renderRow')
      return <CampaignItem campaign={campaign}/>
    }

    addListeners() {
      Bus.on({
        'campaigns:updated': this.campaignsUpdated.bind(this)
      })
    }

    removeListeners() {
      Bus.off({
        'campaigns:updated': this.campaignsUpdated.bind(this)
      })
    }

    campaignsUpdated(event) {
      var campaigns = event.data
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(campaigns)
      })
    }

    campaignSearchChanged(event) {
      var campaignName = event.nativeEvent.text
      Bus.emit('campaigns:search', campaignName)
    }
}

module.exports = CampaignList

我在這做錯了什么？

Answer 1

您正在向ListView傳遞一個返回組件的函數renderRow 。 一旦傳遞了ListView ，就必須在ListView調用該函數，大概是在campaigns的地圖上。

Answer 2

從它的外觀來看，最可能的情況是你在這里有一個經典的React可變性問題。

即我懷疑你的'campaignsUpdated'方法是使用上次收到的相同Array實例調用的，或者列表中的元素是相同的實例。

嘗試使用：

campaignsUpdated(event) {
  var campaigns = event.data.slice(); // <-- clone the array
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(campaigns)
  })
}

如果這不起作用，那么您可以使管理您的比較列表的部分在進行更改時創建新副本（例如const clone = {...campaign, title:"A new Title"} ）或更新您的rowHasChanged查看標題（或您需要的任何數據）是否實際發生變化的方法。

這里有兩個關於JavaScript不變性的非常好的視頻： https ： //egghead.io/lessons/javascript-redux-avoiding-array-mutations-with-concat-slice-and-spread https://egghead.io/lessons / JavaScript的終極版回避對象突變與-對象指派和擴頻