Question

让我先说一下我是React和React Native的新手，所以我可能会犯一些明显的错误。

我使用React Native模块（https://github.com/rt2zz/react-native-contacts）访问我手机的联系人列表，然后我尝试在Listview中显示这些联系人。但是，在模拟器（Genymotion）中运行我的应用程序后，它不会根据我对联系人数组所做的数据更改来更新Listview。

这是我的index.android.js：

import React, {AppRegistry, Component, StyleSheet, TouchableOpacity, Text, 

View, ListView} from 'react-native';

var l_mContacts = require('react-native-contacts');

var l_cAllContacts = [ ];

var newPerson = {
  familyName: "Nietzsche",
  givenName: "Friedrich",
  emailAddresses: [{
    label: "work",
    email: "mrniet@example.com",
    number: "123456789"
  }]
}; //sample person

  l_mContacts.addContact(newPerson, (err, contacts) => { 
  if(err && err.type === 'permissionDenied'){
    alert("error");
  } else {
  }

  }) 



  l_mContacts.getAll((err, contacts) => {
    if(err && err.type === 'permissionDenied'){
      alert("error");
    } else {
      l_cAllContacts = contacts; //data changes here
      alert(contacts); //I can successfully see the sample contact I added here
    }
  });

class ReactNativeTest extends Component {
  constructor(props){
    super(props)
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      enableEmptySections: true
    })
    this.state = {
      contactDataSource: ds.cloneWithRows(l_cAllContacts)
    }
  }
  render() {
    return (
      <View>
          <ListView 
          dataSource={this.state.contactDataSource}
          renderRow={(contact) => {return this._renderContactRow(contact)}}
          />
      </View>
    );
  }

  _renderContactRow(contact){
    return (
      <View>
        <Text>{contact ? contact.givenName : "none"}</Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('ReactNativeTest', () => ReactNativeTest);

任何想法我做错了什么？当我提醒＆＃34;联系人＆＃34; ＆＃34; l_mContacts.getAll＆＃34;内的变量功能我看到了我期望的结果，但它没有更新组件。感谢您的帮助，谢谢。

Answer 1

问题是你在做什么时会有所反应。让我快速解释一下React中的一个组件是如何从程序员的角度出发的：它在开始时呈现一次，如果其状态或其props更改，则会导致重新呈现。

您所做的是获取要在文件加载时显示的信息。这可能会工作一次，但您无法获得任何已更改的信息或以某种方式包含在回调中。你可以做的是在构造函数中运行getAll方法并在回调中使用setState来再次设置contactDataSource状态。

React Native中的数据更改后组件未更新

1 个答案: