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

【问题标题】：Warning when changing controlled input value in React在 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

标签： reactjs input

【解决方案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 是内置函数还是保留关键字？