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

Question

我在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>
        )
    }

我的代码出了什么问题？该字段已更新,但我收到了警告.

谢谢!

Answer 1

这个:

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

将this.state.post完全替换只有一个键的对象.例如,如果name是slug,您将替换post为{ slug: 'something' }.

因此,如果您编辑一个字段,则所有其他字段将变为undefined.React视为value={undefined}一个不受控制的组件并警告你.

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

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