javascript - onChangeText + setState 不使用深度合并更新对象值

Question

我试图通过设置它的状态来更新我的组件的状态，但即使在 onChangeText 被触发后，我的文本也没有更新。

export default class Register extends React.Component {

    constructor(props) {
        super(props)
        this.state = {

             newUser: {
                id: "",
                first_name: "Tom",
                last_name: "",
                email: "",
                age: 0,
                gender: "",
                classification: "",
                major: "",
                interest_tags: new Set()
            }

        }
    }

    updateUser = (text) =>{

    }
    render() {

        return (

            <View style={styles.container}>
                <View style={styles.welcome}>
                    <Text style={styles.welcomeText}>Enter your information below:</Text>
                    </View>
                <View style={styles.inputView}>
                    <TextInput
                                style={styles.inputText}
                                placeholder='First Name'
                                placeholderTextColor='#34415e'
                                autoCapitalize='none'
                                onChangeText={(text) => this.setState({
                                    ...this.state.newUser,
                                    first_name: text
                                    }), () => {console.log(this.state.newUser.first_name)}}

                    />

                </View>

无论我将回调放在 updateUser 函数中还是在渲染函数中，都无法更新 Tom 的 first_name 值。我在这里做错了什么？

标签： javascriptreactjsreact-native

Answer 1

首先，您必须仅使用根对象更新状态

你不能像那样更新状态

onChangeText={(text) => this.setState({
                            ...this.state.newUser,
                            first_name: text
                            }), () => {console.log(this.state.newUser.first_name)}}

让我给你我的自定义函数。

updateObject = (oldObject, updatedProperties) => {
return {
    ...oldObject,
    ...updatedProperties
};};

你可以这样使用

 onChangeText={(text) => {
       let updatedFormElement ;
        updatedFormElement = this.updateObject(this.state.newUser, {
            first_name: text
        });
        this.setState({ newUser: updatedFormElement });
    }}