React Native - 在函数调用时同时呈现双 ListViews

Question

我使用 ListView 对 TextInput 进行了自动建议。我已将列表和输入字段放在视图中，并将 flexDirection 属性设置为行。当我在一个字段中输入时，另一个字段的列表也会被渲染。我是一个单独的领域，使用相同的功能。但它不会被渲染。并将 flexDirection 更改为 row 也不会出现此问题。我如何使它呈现特定于其输入字段的列表。这是我的视图代码和相关功能..

------视图代码--------------

<View style={styles.float}>
            <View style={[styles.flex]}>
              <Text style={styles.modalLabels}>Tags</Text>
              <TextInput
                style={styles.input}
                defaultValue={this.state.fillTags}
                onChangeText={(id) => this.search(id, 'tags')}
                underlineColorAndroid='#bcbcbc'
              />
              <ListView
                style={[styles.listview]}
                dataSource={ds.cloneWithRows(this.state.searchedTags)}
                renderRow={(key) => this.renderList(key, 'tags')}
              />
            </View>
            <View style={[styles.flex]}>
              <Text style={styles.modalLabels}>Location</Text>
              <TextInput
                style={styles.input}
                defaultValue={this.state.fillLocation}
                onChangeText={(id) => this.search(id, 'location')}
                underlineColorAndroid='#bcbcbc'
              />
              <ListView
                style={[styles.listview]}
                dataSource={ds.cloneWithRows(this.state.searchedLocation)}
                renderRow={(key) => this.renderList(key, 'location')}
              />
            </View>
</View> 

----------- 功能----------

autofill = (item,key) => {
    if(key === 'rider'){
      this.setState({fillRider: item.name, searchedRiders: []})
    }
    else if(key === 'tags'){
      this.setState({fillTags: item.name, searchedTags: []})
    }
    else if(key === 'location'){
      this.setState({fillLocation: item.name, searchedLocation: []})
    }
  }

  renderList = (item, key) => {
    const renderItem = (
      <TouchableOpacity>
          <Text
            style={styles.searchText}
            onPress={() => this.autofill(item,key)}>
            {item.name}
          </Text>
      </TouchableOpacity>
    )
    if(key === 'rider'){
      return renderItem
    }

    else if(key === 'tags'){
      return renderItem
    }
    else if(key === 'location'){
      return renderItem
    }
  }

  search = (searchedText, id) => {

    if(id === 'riders'){
      var searchResult = riders.filter(function(rider){
        return rider.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
      });
      this.setState({searchedRiders: searchResult, searchedTags: [], searchedLocation: []})
    }
    else if(id === 'tags'){
      var searchResult = tags.filter(function(tags){
        return tags.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
      });
      this.setState({searchedTags: searchResult, searchedLocation: [], searchedRiders: []})
    }
    else if(id === 'location'){
      var searchResult = location.filter(function(location){
        return location.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
      });
      this.setState({searchedLocation: searchResult, searchedRiders: [], searchedTags: []})
    }
  }

Answer 1

要删除“空部分标题”警告，请在列表视图中添加以下道具：

enableEmptySections={true}

所以您的 ListView 将如下所示：

<ListView
                style={[styles.listview]}
                enableEmptySections={true}
                dataSource={ds.cloneWithRows(this.state.searchedLocation)}
                renderRow={(key) => this.renderList(key, 'location')}
              />

Answer 2

在这部分代码中：

autofill = (item,key) => {
    if(key === 'rider'){
      this.setState({fillRider: item.name, searchedRiders: []})
    }
    else if(key === 'tags'){
      this.setState({fillTags: item.name, searchedTags: []})
    }
    else if(key === 'location'){
      this.setState({fillLocation: item.name, searchedLocation: []})
    }
  }

您正在更新两个 ListView 的 dataSources(searchedTags, searchedLocation)。问题在于： else if 条件。

除非dataSource同时更新，否则不会反映在View中。

提供您的双 ListView 的 UI，以便我可以为您提供 JSX 代码方面的帮助。