Question

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

不变违规：不变违规：试图获取超出范围索引NaN的帧在RCTView（在View中）的Styled（List）（在SearchResults / index.js：13中）的List（在connectStyle.js：392中）的FlatList（在ListStyle.js：392中）的VirtualizedList（在FlatList.js：634中）中.js：35）（在View.js：10）

我的搜索框代码如下：

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组件，而无需使用本机基础，如下所示。

for (int i = 0; i < s.size(); i++)
    {
        if (!(s[i] >= 'a' && s[i] <= 'z' || s[i] >= 'A' && s[i] <= 'Z'))
        {
            s[i] = '\0';
        }

    }

s.erase(remove(s.begin(), s.end(), ' '), s.end());

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

1 个答案: