Question

在以下代码中，从setState调用campaignsUpdated时，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内调用该函数，大概是在campaigns的地图上。

Answer 2

从外观来看，最可能的情况是你在这里有一个经典的React可变性问题。

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

尝试使用：

SIP Trunk: 123456 (2 Channels)
SIP Trunk: 654321 (5 Channels)

如果这不起作用，那么您可以使管理您的比较列表的部分在进行更改时创建新副本（例如campaignsUpdated(event) { var campaigns = event.data.slice(); // <-- clone the array this.setState({ dataSource: this.state.dataSource.cloneWithRows(campaigns) }) }）或更新您的rowHasChanged方法以查看标题（或其他你需要的数据实际上已经改变了。

以下是两个关于JavaScript不变性的非常好的视频： https://egghead.io/lessons/javascript-redux-avoiding-array-mutations-with-concat-slice-and-spread https://egghead.io/lessons/javascript-redux-avoiding-object-mutations-with-object-assign-and-spread

React Native：renderRow未执行

2 个答案: