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字段。因此，在更新状态后，您最终会得到以下数据：{&nbsp; newUser: { /* the initial value*/ },&nbsp; // all the other proprerties inside `newUser`, such as&nbsp; email: "",&nbsp; age: 0,&nbsp; // then the key you merged into the state explicitly:&nbsp; first_name: "whatever the user typed"}你可能打算这样写（记住这setState已经是一个浅合并，所以只有newUser在你的状态对象中有更多值时才会更新）：this.setState({&nbsp; newUser: {&nbsp; &nbsp; ...this.state.newUser,&nbsp; &nbsp; first_name: text&nbsp; }})

Answer 2

你能试试这个onChangeText={(text) => this.setState({&nbsp; &nbsp; &nbsp; newUser : {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...this.state.newUser,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;first_name: text,&nbsp; &nbsp; &nbsp; }}), () => {console.log(this.state.newUser.first_name)}

Answer 3

首先，您必须仅使用根对象更新状态你不能像那样更新状态onChangeText={(text) => this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...this.state.newUser,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; first_name: text&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }), () => {console.log(this.state.newUser.first_name)}}让我给你我的自定义函数。updateObject = (oldObject, updatedProperties) => {return {&nbsp; &nbsp; ...oldObject,&nbsp; &nbsp; ...updatedProperties};};你可以这样使用&nbsp;onChangeText={(text) => {&nbsp; &nbsp; &nbsp; &nbsp;let updatedFormElement ;&nbsp; &nbsp; &nbsp; &nbsp; updatedFormElement = this.updateObject(this.state.newUser, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; first_name: text&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ newUser: updatedFormElement });&nbsp; &nbsp; }}&nbsp; &nbsp;