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

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

警告是:

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

这是我的代码：

构造函数：

constructor(props){
        super(props);

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

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

    }

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

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

手柄更换功能

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

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

输入渲染：

constructor(props){
        super(props);

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

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

    }

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

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

render（）{
返回(
蒂图罗
鼻涕虫
)
}

我的代码怎么了？该字段已更新，但我收到该警告

---

谢谢

您设置的状态是重置整个

post

对象。您可能希望执行以下操作：

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

---

使用扩展运算符求解这是使用嵌套属性的更新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});
    }

这：

将用只有一个键的对象完全替换

this.state.post

。例如，如果

name

是

slug

，则将

post

替换为

{slug:'something'}

因此，如果编辑一个字段，则所有其他字段都将成为未定义的

。React将

value={undefined}

视为一个错误，并警告您

要解决此问题，您可能希望将

post

更新与现有对象合并，而不是替换它：

constructor(props){
        super(props);

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

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

    }

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

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

---

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