Question

我无法弄清楚为什么我的input没有更新。这是我的代码：

state = {
    org: {
        orgName: ''
    }
};

updateInput = field => event => {
    this.setState({
        [field]: event.target.value
    })
}

render() {
    let { org } = this.state
    return (
        <input
            value={org.orgName}
            onChange={this.updateInput('orgName')}
        />
    )
}

我将数据输入input。它会调用updateInput并设置state。调用render后，org.orgName再次为''。这应该有效。

我甚至在setState回调中添加了一个日志：

this.setState({
        [field]: event.target.value
}, () => console.log(this.state.org))

并注销已输入org

的input信息

我错过了什么？我如何使这项工作？

Answer 1

您所在州有一个嵌套对象 - 您正在更新this.state.orgName而不是this.state.org.orgName

updateInput = field => event => {
    this.setState({
        [field]: event.target.value
    })
}

需要

updateInput = field => event => {
    this.setState({
        org: {
            ...this.state.org,
            [field]: event.target.value
        }
    })
}

建议您尽管在前进中避免将对象嵌套在状态中。事后证明难以优化。

为什么我的输入没有更新？ - 反应

1 个答案: