必须两次提交输入字段才能做出反应

问题描述

我有此输入字段，可在其中输入城市和州，并返回城市数据。我的问题是我必须提交两次才能重新渲染。例如，当应用启动时，它已经使用默认城市进行渲染，现在，如果我在输入字段中输入其他城市和州并提交并显示其数据，则我必须提交两次才能使它工作。

class CountyAndLocalScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoading: true,location: {
                city: null,state: null
            },officicalsData: [],officesData: [],address: null
        }
    }

    async componentDidMount() {
        try {
            let jsonValue = await AsyncStorage.getItem('userAddress')
            let addressObj = null

            if (jsonValue != null)
                addressObj = JSON.parse(jsonValue)

            let address = addressObj.address

            if (address !== null) {
                this.setState({
                    officicalsData: [],isLoading: true,address: address
                })
        
                await this.county()
                await this.local()

                this.findOfficialRole()
            }
        } catch (err) {
            alert(err)
        }
    }

    findOfficialRole = async () => {
        let { officicalsData,officesData } = this.state

        let foundRole = 0,i = 0,j = 0,k = 0;

        if (officicalsData[0] === null)
            return
        
        for (i = 0; i < Object.keys(officicalsData[0]).length; i++) {
            for (j = 0; j < Object.keys(officesData[0]).length; j++) {
                foundRole = 0;

                for (k = 0; k < officesData[0][j].officialIndices.length; k++) {
                    if (i === officesData[0][j].officialIndices[k]) {
                        officicalsData[0][i].role = officesData[0][j].name;

                        foundRole = 1;
                        break;
                    }
                }

                if (foundRole)
                    break;
            }
        }

        this.setState({
            isLoading: false
        })
    }

    officials = () => {
        return (
            <View style={{ flex: 1 }}>
                <FlatList
                    data={this.state.officicalsData[0]}
                    renderItem={({ item }) => (
                        <View>
                            <TouchableOpacity>
                                {item.photoUrl !== undefined ? <Image source={{ uri: item.photoUrl }} style={{ width: 100,height: 100 }} />
                                    : <Image source={profileImage} style={{ width: 100,height: 100 }} />}
                                <Text>{item.name}</Text>
                                <Text>{item.party}</Text>
                                <Text>{item.role}</Text>
                                <Text></Text>
                            </TouchableOpacity>
                        </View>
                    )}
                    keyExtractor={item => item.name}
                />
            </View>
        )
    }

    county = async () => {
        let countyUrl = `https://www.googleapis.com/civicinfo/v2/representatives?address=${this.state.address}&includeOffices=true&levels=administrativeArea2&key=${api_key}`;

        let req = new Request(countyUrl,{
            method: 'Get'
        })

        await fetch(req)
            .then(response => response.json())
            .then(response => {
                let data = [...this.state.officicalsData,response.officials].filter(elem => {
                    return elem !== undefined
                })

                let office = [...this.state.officesData,response.offices].filter(elem => {
                    return elem !== undefined
                })

                this.setState({
                    officicalsData: data,officesData: office,location: {
                        city: response.normalizedInput.city,state: response.normalizedInput.state
                    }
                })

                // this.findOfficialRole()
            })
            .catch(console.log)
    }

    local = async () => {
        let localUrl = `https://www.googleapis.com/civicinfo/v2/representatives?address=${this.state.address}&includeOffices=true&levels=locality&key=${api_key}`;

        let req = new Request(localUrl,state: response.normalizedInput.state
                    }
                })

                // this.findOfficialRole()
            })
            .catch(console.log)
    }

    changeHandler = async (val) => {
        if (val.nativeEvent.text == "")
            return

        let address = val.nativeEvent.text.replace(/ /g,'%20').replace(',','%2C').toLowerCase()

        this.setState({
            officicalsData: [],address: address
        })

        await this.county()
        await this.local()

        this.findOfficialRole()
    }

    render() {
        return (
            <View style={{ marginTop: Constants.statusBarHeight,flex: 1 }}>
                {/* Searchbar */}
                <TextInput 
                    placeholder={'City,State'}
                    onSubmitEditing={async (val) => await this.changeHandler(val)}
                />
                {/* Flatlist of data */}
                {
                    this.state.isLoading ? (<ActivityIndicator size={'large'} />) : (<this.officials />)
                }
            </View>
        )
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）