3

我一直在尝试从 Firestore 文档中的列表中填充选择器。如果数据是在应用程序中创建的，选择器可以工作，但如果我使用来自我的数据库的数据，则会收到错误。

Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.    in CellRenderer (at VirtualizedList.js:681)
in RCTScrollContentView (at ScrollView.js:726)
in RCTScrollView (at ScrollView.js:820)
in ScrollView (at VirtualizedList.js:1009)
in VirtualizedList (at FlatList.js:640)
in FlatList (at Picker.ios.js:188)
in RCTScrollContentView (at ScrollView.js:726)
in RCTScrollView (at ScrollView.js:820)
in ScrollView (at KeyboardAwareHOC.js:329)
in _class (at Content.js:10)
in Content (at connectStyle.js:384)
in Styled(Content) (at Picker.ios.js:187)
in RCTView (at View.js:71)
in View (at Container.js:15)
in Container (at connectStyle.js:384)
in Styled(Container) (at Picker.ios.js:185)
in RCTView (at View.js:71)
in View (at AppContainer.js:102)
in RCTView (at View.js:71)
in View (at AppContainer.js:122)
in AppContainer (at Modal.js:238)
in RCTView (at View.js:71)
in View (at Modal.js:257)
in RCTModalHostView (at Modal.js:244)
in Modal (at Picker.ios.js:176)
in RCTView (at View.js:71)
in View (at Picker.ios.js:174)
in PickerNB (at connectStyle.js:384)
...

无论我尝试以哪种方式导入数据，都会发生这种情况。这导致我的 Picker 项目未在 Android 中显示并在 IOS 中显示，但无法正确读取数据。

这是我的 package.json 文件。

"native-base": "^2.3.9",
"react": "16.2.0",
"react-native": "0.53.0",
"react-native-firebase": "^3.2.4",
"react-navigation": "^1.0.0"

这是我的代码：

import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    View,
    AppRegistry,
    ListView
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import firebase from 'react-native-firebase';
import { Container, Content, Header, Left, Body, Right, Button, Icon, Title, Text, List, ListItem, Form, Input, Label, Item, Picker } from 'native-base'

const companies = ["Choose a Company"]

export default class EditScreen extends Component {
    constructor(){
        super();
        this.onChangeSpcompany = this.onChangeSpcompany.bind(this)
        this.companies = [];
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            companiesDataSource: ds,
            companies: null
        }
    }

componentWillMount(){
    this.setState({
        companies: this.props.navigation.state.params.companies
    })
    firebase.firestore().doc('companyList/list').get().then(doc => {
        let data = doc.data();
        for(let company in data){
            console.log(data[company])
            this.companies.push(`${data[company]}`)
        }
    })
}

componentDidMount(){
    this.fetchCompanies()
    // this.state.companies.map((l, i) => {
    //     console.log(l, i)
    // })
    console.log(this.state.companies)
    if(this.state.companies !== null){
        for(let company in this.state.companies){
            console.log(company)
        }
        // this.state.companies.forEach(element => {
        //     console.log(element)
        // })
    }
}

fetchCompanies(){
    firebase.firestore().doc('companyList/list').get().then(doc => {
        this.setState({
            companiesDataSource: `this.state.companiesDataSource.cloneWithRows(doc.data()),
            companies: doc.data()
        })
    })
}

onChangeSpcompany(value){
        this.setState({
            spcompany: value
        })
}

renderRow(company){
    return(
        <Picker.Item label={company} value={company}/>
    )
}

这是视图

render() {
    let choiceArray = []
    for(let company in this.state.companies){
        let data = this.state.companies
        let brick = (
            <Picker.Item key={`${data[company]}`} label={data[company]} value={company}/>
        )
        choiceArray.push(brick)
    }
    return(
        <Container>
            <Content>
                <Form>
                    <List>
                        <Item>
                            <Label>{I18n.t('spcompany')}</Label>
                            <Picker
                                iosHeader="Select one"
                                mode="dropdown"
                                style={{ width:(Platform.OS === 'ios') ? undefined : 140 }}
                                selectedValue={this.state.spcompany}
                                onValueChange={(value, index) => this.onChangeSpcompany(value)}
                                placeholder={this.state.spcompany}
                            >
                                {choiceArray}
                                {/* { this.companies.map((company, index) => {
                                    console.log(company)
                                    return <Picker.Item key={`company${index}`} label={company} value={company}/>
                                })} */}
                                {/* <ListView 
                                    dataSource={this.state.companiesDataSource}
                                    renderRow={this.renderRow.bind(this)}
                                /> */}
                            </Picker>
                        </Item>
                        <Item>
                            <Label>{I18n.t('lang')}</Label>
                            <Picker
                                iosHeader="Select one"
                                mode="dialog"
                                prompt='Select one'
                                style={{ width:(Platform.OS === 'ios') ? undefined : 140 }}
                                selectedValue={this.state.language}
                                onValueChange={value => this.onChangeLanguage(value)}
                            >   
                                <Picker.Item label="English" value="en" />
                                <Picker.Item label="Français" value="fr" />
                            </Picker>
                        </Item>
                    </List>
                </Form>
                <Button block onPress={this.handleEdit} style={styles.button}>
                    <Text>{I18n.t('editProfile')}</Text>
                </Button>
            </Content>
        </Container>
    )
}

我知道我的代码中存在冗余，我尝试了几件事，但它们最终都得到了相同的结果。奇怪的是，即使我确保我的密钥是一个字符串，也会收到错误。我该如何解决这个错误？

4

0 回答 0