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 值。我在这里做错了什么？

Answer 1

“使用检查员，卢克！” ~ 欧比旺 Reactnobi

在您的setState通话中，您正在合并状态本身的内容newUser以及first_name状态本身，而不是状态的newUser字段。因此，在更新状态后，您最终会得到以下数据：

{

  newUser: { /* the initial value*/ },

  // all the other proprerties inside `newUser`, such as

  email: "",

  age: 0,

  // then the key you merged into the state explicitly:

  first_name: "whatever the user typed"

}

你可能打算这样写（记住这setState已经是一个浅合并，所以只有newUser在你的状态对象中有更多值时才会更新）：

this.setState({

  newUser: {

    ...this.state.newUser,

    first_name: text

  }

})

Answer 2

你能试试这个

onChangeText={(text) => this.setState({

      newUser : {

         ...this.state.newUser,

         first_name: text,

      }

}), () => {console.log(this.state.newUser.first_name)}

Answer 3

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

你不能像那样更新状态

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 });

    }}