Question

在我的React应用程序（版本15.5.4）中，我的一个组件中的输入字段收到以下警告：

Warning: 'value' prop on 'input' should not be null. Consider using the empty string to clear the component or 'undefined' for uncontrolled components.

参考以下jsx：

<label>Description<br />
    <input
        type="text"
        name="description"
        value={this.state.group.description}
        onChange={this.handleChange}
        maxLength="99" />
</label>

但我对此感到困惑，因为this.state.group.description的值在我的构造函数中设置为""：

this.state = {
    "group": {
        "name": "",
        "description": ""
    }
}

进一步让我感到震惊的是，另一个输入字段引用了this.state.group.name，但没有引发任何警告：

<label>Name *<br />
    <input
        type="text"
        name="name"
        value={this.state.group.name}
        onChange={this.handleChange}
        maxLength="99"
        required="required"
        autoFocus />
</label>

我在这里遗漏了什么吗？据我所知，我已经将这两个值的初始状态设置为空字符串，并在两个输入字段中以相同的方式引用它们，但是一个会抛出警告而另一个则没有。

这不是世界末日......应用程序运行良好，但我真的很想了解为什么会发生这种情况并让我的应用运行得很干净。

这是handleChange：

handleChange(event) {
    const attribute = event.target.name
    const updatedGroup = this.state.group
    updatedGroup[attribute] = event.target.value
    this.setState({"group": updatedGroup})
}

Answer 1

问题在于handleChange函数，你正在直接改变状态

const updatedGroup = this.state.group
updatedGroup[attribute] = event.target.value

使用spread operator来复制组对象

handleChange(event) {
    const attribute = event.target.name
    const updatedGroup = [...this.state.group]
    updatedGroup[attribute] = event.target.value
    this.setState({"group": updatedGroup})
}

Answer 2

如果该值为null，则通过相同的错误反应15。因此最好将输入的默认props“值”设置为空字符串，以便在没有警告的情况下运行react js代码。

<input type="text" value={value || ''}/>;

Answer 3

感谢@ShubhamKhatri和@Dekel指出我正确的方向 - 我甚至没有考虑过构造函数中设置的空字符串被覆盖了有问题的值这一事实。事实证明问题的根源是，在将description的值设置为空字符串后，我的API会使用null覆盖它。

我通过调整我的render方法解决了这个问题：

let groupDescription;

if (!this.state.group.description) {
    groupDescription = ""
} else {
    groupDescription = this.state.group.description
}

return (
    <label>Description<br />
        <input
            type="text"
            name="description"
            value={groupDescription}
            onChange={this.handleChange}
            maxLength="99" />
    </label>
)

Answer 4

我还没有向select元素添加onChange事件处理程序时收到此错误。

在添加onChange事件之前，我只是进行了初步测试以查看元素的外观。不幸的是，当开始不是一个问题时，我花了太多时间试图弄清楚这一点。我不确定的一件事是为什么当未指定onChange事件时为何将其报告为null而不是""。

React - 对于某些输入，“输入”上的“'值'道具不应为空”，而不是其他输入

4 个答案: