表单输入状态不显示开发人员工具中的更新，而是记录它们。我重新开始工作了吗？

Question

我正在学习控制形式，并建立了一个简单的输入形式，以实践。当我查看工具时，组件的状态似乎没有被更新。如果我console.log状态，我可以看到状态在我输入的每一个字母中都发生了变化，但是在developer工具中没有任何变化。我担心它可能渲染不当。

我已经构建了表单，导出并导入到App.js中。一切似乎都是正确连接的，包括一个console.log，用于显示每一次更改的状态。

class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
        }
        this.handleChange = this.handleChange.bind(this)
    }


    handleChange(evt) {
        this.setState(
            {username: evt.target.value},
            () => console.log(this.state)
        )
    }

    render() {
        return (
            <form>
                <input 
                    name="username"
                    value={this.state.username}
                    onChange={this.handleChange}
                />
            </form>
        )
    }
}

我没有发现任何错误，但是观察到了两件有趣的事情:在react developer-tools中，在表单组件下，状态保持不变，但是会弹出一个小箭头，上面写着“重置值”，如果我单击App组件，然后返回到表单上，状态将被填充该值。

Answer 1

您可以检查反应文件

setState()的第二个参数是一个可选的回调函数，该函数将在setState完成并重新呈现组件后执行。通常，我们建议对这种逻辑使用componentDidUpdate()。

因此，如果回调被调用，那么一切都按预期的方式工作，这是因为组件重新呈现。

您正在使用上个月发布的react开发工具的最新版本吗？