Question

我有一个scrollView，我想在运行时添加和删除组件。我创建了一个要从该scrollView中添加或删除的组件。我正在从要添加新组件的地方在buttonPress上调用方法。我正在尝试使用setState（），但无法刷新屏幕。

我是本机反应的新手，没有任何Web技术背景。因此，我无法弄清楚自己犯了什么错误。这是我的代码-

这是屏幕-

export default class PersonalInfoView extends Component {

constructor(props) {
    super(props);
    this.state = {
        personalInfoList: [new PersonalInfoModel()],
        allCardViews: [<PersonalInfoCard info={new PersonalInfoModel()}/>],
        disabled: false
    };
    this.count = 1;
}

  render() {
let personalInfoCardViews = this.state.allCardViews;

return (<ScrollView>
    <View>
        <View style={{padding: 15, backgroundColor: '#0070ba'}}>
            <Text style={styles.textLabel}>Add personal information fo yourself and anyone else who you will be
                filling out forms for.</Text>
        </View>

        <View style={{padding: 20, justifyContent: 'center'}}>

            {/*{this.renderPersonalInfoCards()}*/}

            {personalInfoCardViews}

            <TouchableOpacity style={personalInfoStyle.buttonFilledGreen} onPress={this.addPersonalInfoLayout.bind()}>
                <View style={{flexDirection: "row", justifyContent: 'center'}}>
                    <Text style={styles.registerButtonText}>Add Person</Text>
                    <Image
                        resizeMode="contain" style={{width: 25, height: 25, marginLeft: 10, alignSelf: 'center'}}
                        source={require('./../../images/plus.png')}

                    />

                </View>
            </TouchableOpacity>

            <TouchableOpacity style={styles.loginRegisterButton} onPress={this.sendPersonalInfo}>
                <Text style={styles.registerButtonText}>Continue</Text>
            </TouchableOpacity>
        </View>
    </View>
</ScrollView>);
};

addPersonalInfoLayout = () => {
    this.setState(()=>{[...this.state.allCardViews, <PersonalInfoCard info={new PersonalInfoModel()}/>]})
};

这是另一个组件-

export default class PersonalInfoCard extends Component {

    static propTypes = {
        info: PersonalInfoModel
    };

    constructor(props) {
        super(props);

        this.state = {
            prefix: String,
            first_name: String,
            middle_name: String,
            last_name: String,
            suffix: String,
            mobile_no: String,
            country_code: String,
            email: String,
            isModalVisible: false,
        };
    };

    render() {
        return (
            <View style={{
                justifyContent: 'center',
                width: '100%',
                paddingVertical: 20,
                marginTop: 16,
                borderRadius: 15,
                backgroundColor: '#fff',
                elevation: 2
            }}>

                <TextInput style={personalInfoStyle.textInputBox}
                           underlineColorAndroid='rgba(0,0,0,0)' placeholder="Prefix" value={this.props.info.prefix}
                           placeholderTextColor="#000000" onChangeText={(prefix) => {
                    this.setState({prefix: prefix})
                }}/>

                <TextInput style={personalInfoStyle.textInputBox}
                           underlineColorAndroid='rgba(0,0,0,0)' placeholder="First Name"
                           value={this.props.info.firstName}
                           placeholderTextColor="#000000"
                           onChangeText={(first_name) => this.setState({first_name: first_name})}/>

                <TextInput style={personalInfoStyle.textInputBox}
                           underlineColorAndroid='rgba(0,0,0,0)' placeholder="Middle Name"
                           value={this.props.info.middleName}
                           placeholderTextColor="#000000"
                           onChangeText={(middle_name) => this.setState({middle_name: middle_name})}/>

                <TextInput style={personalInfoStyle.textInputBox}
                           underlineColorAndroid='rgba(0,0,0,0)' placeholder="Last Name"
                           value={this.props.info.lastName}
                           placeholderTextColor="#000000"
                           onChangeText={(last_name) => this.setState({last_name: last_name})}/>

                <TextInput style={personalInfoStyle.textInputBox}
                           underlineColorAndroid='rgba(0,0,0,0)' placeholder="Suffix" value={this.props.info.suffix}
                           placeholderTextColor="#000000" onChangeText={(suffix) => this.setState({suffix: suffix})}/>

                <View style={{flexDirection: 'row',}}>

                    <TextInput
                        style={
                            personalInfoStyle.textCountryCodeInput
                        }
                        underlineColorAndroid='rgba(0,0,0,0)' placeholder="+1"
                        placeholderTextColor="#000000"
                        onChangeText={(countryCode) => this.setState({country_code: countryCode})}/>

                    <TextInput style={personalInfoStyle.textMobileInputBox}
                               underlineColorAndroid='rgba(0,0,0,0)' placeholder="Mobile Number"
                               placeholderTextColor="#000000"
                               onChangeText={(mobileNo) => this.setState({mobile_no: mobileNo})}/>
                </View>

                <TextInput style={personalInfoStyle.textInputBox}
                           underlineColorAndroid='rgba(0,0,0,0)' placeholder="Email" value={this.props.info.email}
                           placeholderTextColor="#000000" onChangeText={(email) => this.setState({email: email})}/>

            </View>
        );
    }
}

我在堆栈溢出上尝试了许多解决方案，但仍然无法确定问题所在。请帮忙。预先感谢。

Answer 1

我无法在评论中添加它！是的

您的示例中的问题太多。

在哪里定义您的 onPress = {this.addPersonalInfoLayout.bind（）}

onPress = {this.sendPersonalInfo}

更好的是，您可以在新闻事件中编写刷新条件。

setState（）方法调用上无法刷新（重新渲染）组件

1 个答案: