不变违规：不变违规：尝试在渲染列表时获取超出范围索引NaN的帧

Question

我正在尝试开发一个具有出租车搜索页面的React Native应用，该页面上有两个搜索框``Pick Up''和``Drop off''。 我已经使用了google-places api并显示了搜索结果。 我的取件搜索框工作正常。 当我将其用于下车时，使用相同的代码进行少量更改以指示“下车”会引发错误。 我无法弄清楚出了什么问题。 我遇到以下错误：

不变违反：不变违反：尝试获取Styled（List）中List（connectStyle.js：392）的FlatList（list.js：12）的VirtualizedList（FlatList.js：634）的范围索引NaN的帧）（在RCTView（在View.js：35）在View（在View.js：10）在SearchResults / index.js：13）

我的搜索框代码如下：

import React from "react";
import {Text, PermissionsAndroid} from "react-native";
import styles from "./SearchBoxStyles";
import {View, InputGroup, Input} from "native-base";
import Icon from "react-native-vector-icons/FontAwesome";

export const SearchBox = ({getInputData, toggleSearchResultModal,getAddressPredictions}) =>{
    function handleInput(key, val){
        getInputData({
            key, 
            value: val

        });
        getAddressPredictions();
    }
    return(
        <View style={styles.searchBox}>
            <View style={styles.inputWrapper}>
                <Text style ={styles.label}>PICK UP</Text>
                <InputGroup>
                    <Icon name="search" size={15} color="#FF5E3A"/>
                    <Input onFocus={()=>toggleSearchResultModal("pickUp")} style = {styles.inputSearch} placeholder="Choose pick up location" onChangeText={handleInput.bind(this,"pickUp")}/>
                </InputGroup>
            </View>
            <View style={styles.inputWrapper}>
                <Text style ={styles.label}>DROP OFF</Text>
                <InputGroup>
                    <Icon name="search" size={15} color="#FF5E3A"/>
                    <Input onFocus={()=>toggleSearchResultModal("dropOff")} style = {styles.inputSearch} placeholder="Choose drop off location" onChangeText={handleInput.bind(this,"dropOff")}/>                
                </InputGroup>
            </View>
        </View>
    );
}

export default SearchBox;

我的搜索结果代码如下：

import React from "react";
import {Text, PermissionsAndroid} from "react-native";
import styles from "./SearchResultsStyles";
import {View, List, ListItem, Left, Item, Body} from "native-base";
import Icon from "react-native-vector-icons/MaterialIcons";

export const SearchResults = ({predictions, getSelectedAddress}) =>{
    function handleSelectedAddress(placeID){
        getSelectedAddress(placeID)
    }
    return(
        <View style={styles.searchResultsWrapper}>
            <List 
                 dataArray = {predictions}
                renderRow ={(item)=>
                    <View>
                        <ListItem onPress={()=>handleSelectedAddress(item.placeID)} button avatar>
                            <Left style={styles.leftContainer}>
                                <Icon style={styles.leftIcon} name="location-on"/>
                            </Left>
                            <Body>
                                <Text style={styles.primaryText}>{item.primaryText}</Text>
                                <Text style={styles.secondaryText}>{item.secondaryText}</Text>
                            </Body>   
                        </ListItem>                 
                    </View>
                }
            />
        </View>
    );
}

export default SearchResults;

呈现在：

import React from "react";
import {View} from "native-base";
import MapView from "react-native-maps";
import styles from "./MapContainerStyles"
import SearchBox from "../SearchBox";
import SearchResults from "../SearchResults";

const MapContainer = ({region, getInputData, toggleSearchResultModal, getAddressPredictions, resultTypes, predictions, getSelectedAddress}) =>{
    return(
        <View style={styles.container}>
            <MapView
                provider={MapView.PROVIDER_GOOGLE}
                style={styles.map}
                region={region}
            >
                <MapView.Marker
                    coordinate={region}
                    pinColor="green"
                />
            </MapView>    
            <SearchBox 
                getInputData={getInputData} 
                toggleSearchResultModal={toggleSearchResultModal} 
                getAddressPredictions={getAddressPredictions}
            /> 
            { (resultTypes.pickUp || resultTypes.dropOff) &&
                <SearchResults predictions={predictions} getSelectedAddress={getSelectedAddress}/>
            }    
        </View>
    )
}

export default MapContainer;

以下是与我的操作相关的代码：

export function getInputData(payload){
    return{
        type:GET_INPUT,
        payload
    }
}

//toggle search result model

export function toggleSearchResultModal(payload){
    return{
        type:TOGGLE_SEARCH_RESULT,
        payload
    }
}

// GET ADDRESSES FROM GOOGLE PLACES

export function getAddressPredictions(){
    return(dispatch, store)=>{
        let userInput = store().home.resultTypes.pickUp ? store().home.inputData.pickUp : store().home.inputData.dropOff;

        RNGooglePlaces.getAutocompletePredictions(userInput,
            {
                country:"us"
            }
        )
        .then((results)=>
            dispatch({
                type:GET_ADDRESS_PREDICTIONS,
                payload:results
            })
        )
        .catch((error)=>console.log(error.message));
    };
}

以下是相应的处理程序：

function handleGetInputData(state, action){
    const {key, value} =action.payload;
    return update(state,{
        inputData:{
            [key]:{
                $set:value
            }
        }
    });
}

function handleToggleSearchResult(state, action){
    if(action.payload === "pickUp"){
        return update(state, {
            resultTypes:{
                pickUp:{
                    $set : true,
                },
                dropOff:{
                    $set : false
                },
                predictions:{
                    $set :{}
                }
            }
        })
    }
    if(action.payload === "dropOff"){
        return update(state, {
            resultTypes:{
                pickUp:{
                    $set : false,
                },
                dropOff:{
                    $set : true
                }

            },
            predictions:{
                $set :{}
            }   
        })
    }
}

function handleGetAddressPredictions(state,action){
    return update(state,{
        predictions:{
            $set:action.payload
        }
    }) 
}

function handleGetSelectedAddress(state,action){
    let selectedTitle = state.resultTypes.pickUp ? "selectedPickUp" : "selectedDropOff"
    return update(state,{
        selectedAddress:{
            [selectedTitle]:{
                $set:action.payload
            }

        },
        resultTypes:{
            pickUp: {
                $set : false
            },
            dropOff:{
                $set : false
            }
        }
    })
}

我不知道问题所在。 有人可以帮忙。 提前致谢！！！

Answer 1

这是因为List在本机版本0.6中已贬值。 因此，您可以使用react-native组件，而无需使用本机基础，如下所示。

 import React from "react"; import { Text,ScrollView ,FlatList,View} from "react-native"; import Icon from "react-native-vector-icons/MaterialIcons"; import styles from "./searchResultsStyles"; export const SearchResults = ({ predictions, getSelectedAddress }) => { function handleSelectedAddress(placeID) { getSelectedAddress(placeID) } return ( < ScrollView style={styles.searchResultsWrapper} > <FlatList data={predictions} renderItem={({ item }) => { return <View style={styles.row}> <View style={styles.leftContainer}> <Icon style={styles.leftIcon} name="location-on" /> </View> <Text style={styles.primaryText}>{item.primaryText}</Text> <Text style={styles.secondaryText}>{item.secondaryText}</Text> </View> }} /> </ScrollView > ); }; export default SearchResults;

不变违规：不变违规：尝试在渲染列表时获取超出范围索引NaN的帧

问题描述

1 个解决方案

解决方案1
0 2019-08-03 18:11:16

不变违规：不变违规：尝试在渲染列表时获取超出范围索引NaN的帧

问题描述

1 个解决方案

解决方案1 0 2019-08-03 18:11:16

解决方案1
0 2019-08-03 18:11:16