Question

我正在学习反应，并尝试更新输入字段。我正在尝试制作分层表格。我有一个类组件 Body 和功能组件或子组件 Form 。我的对象处于“身体”状态，并在“表单”中进行了更新。两者都在单独的文件中。调用该函数并将状态设置为击键时，无法更新输入字段。

class Body extends React.Component{
constructor(props){
        super(props)
        this.state = {
            users : [],
            user: {
                userName: '',
                setUserName : name => {this.setState({userName : name}); console.log(this.state.userName)},
                city: '',
                setCity : city => { this.state.city = city},
                cnic: '',
                setCNIC : cnic => { this.state.cnic = cnic},
                address: '',
                setAddress : address => { this.state.address = address}
            }
        }
    }
}

Form.js


const onChange = (event, updater) => {
    updater(event.target.value)
    //console.log(event.target.value)
}

function UserForm (props){
    //console.log(props) 
    return(
      <form>
            <label>
                Name:
                <input name="userName" value = {props.user.userName} onChange = {event => onChange(event, props.user.setUserName)}>
                </input>
            </label>
      </form>
           )
}

Form.js的文件名没有错字。函数组件是UserForm，文件名是Form.js。我正在传递道具并更新价值。但输入字段及其值没有变化。

Answer 1

您在setUserName()组件初始状态的setCity()对象中定义的setter函数（即user，Body等）似乎正在应用状态会在状态对象中更新到与您期望的状态不同的“位置”。

setState()函数相对于组件state对象的根应用状态更新。

在您的情况下，这意味着使用参数setUserName调用"bob"时，Body组件状态将更新为：

{ 
users :[], 
user : { /* existing object */ }, 
userName : "bob" /* Update applied relative to root of state object */
}

要实现“嵌套状态更新”（即更新state.user.userName），请考虑通过以下方式更新您的setter函数：

setUserName : name => {
    this.setState({ 
        // Update existing user object with replacement
        user : { 
            ...this.state.user, // Clone existing user in state
            userName : name // Update the userName field in cloned user 
        }
    })
}

希望有帮助！

输入字段未更新。具有功能组件子级的父类

1 个答案: