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}视为uncontrolled component并向您发出警告。

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

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

Answer 2

您的设置状态正在重置整个post对象。你可能想做类似的事情：

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

Answer 3

解决使用spread运算符，这是更新的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});
    }

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

3 个答案: