在 React 中更改受控输入值时发出警告

Posted 2023-02-23

【中文标题】在 React 中更改受控输入值时发出警告

【英文标题】：Warning when changing controlled input value in React

【发布时间】：2018-10-02 19:40:51

【问题描述】：

我正在用 React 写一个小博客，但在更新输入更改事件的状态时遇到问题。

警告是：

警告：组件正在将文本类型的受控输入更改为 不受控制。输入元素不应从受控切换到 不受控制（反之亦然）。决定使用受控或 组件生命周期内不受控制的输入元素

这是我的代码：

构造函数：

constructor(props)
        super(props);

        this.state = 
            id: '',
            post: 
                title: '',
                slug: '',
                content: ''
            
        

        this.handleChange = this.handleChange.bind(this);

    

handleChange 函数

handleChange(event) 
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState(
            post: 
                [name]: value
            
        );
    

输入渲染：

render()
        return (
            <div>
                <AdminMenu />
                <div id="admin-post-form">
                    <div className="input-group vertical">
                        <label>Título</label>
                        <input
                            name="title"
                            placeholder="Título"
                            type="text"
                            value=this.state.post.title
                            onChange=this.handleChange
                        />
                    </div>
                    <div className="input-group vertical">
                        <label>Slug</label>
                        <input
                            name="slug"
                            placeholder="Slug"
                            type="text"
                            value=this.state.post.slug
                            onChange=this.handleChange
                        />
                    </div>

                </div>
            </div>
        )
    

我的代码有什么问题？该字段已更新，但我收到了警告。

谢谢！

【问题讨论】：

reactjs.org/docs/uncontrolled-components.html

【参考方案1】：

您的设置状态正在重置整个post 对象。您可能想要执行以下操作：

this.setState(
    post: 
        ...this.state.post
        [name]: value
    
)

【参考方案2】：

已解决使用扩展运算符，这是使用嵌套属性的更新后的 handleChange 函数：

handleChange(event) 
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        var post = ...this.state.post
        post[name] = value;
        this.setState(post);
    

【参考方案3】：

这个：

    this.setState(
        post: 
            [name]: value
        
    );

将用只有一个键的对象完全替换this.state.post。例如，如果name 是slug，则将post 替换为 slug: 'something' 。

因此，如果您编辑一个字段，所有其他字段将变为undefined。 React 将 value=undefined 视为 uncontrolled component 并警告您。

要解决此问题，您可能希望将 post 更新与现有对象合并，而不是替换它：

    this.setState(prevState => (
        post: 
            ...prevState.post,
            [name]: value
        
    ));

【讨论】：

prevState 是内置函数还是保留关键字？