react - 对于某些输入而不是其他输入，“输入”上的“值”props不应为空

IT技术 reactjs
2021-05-07 12:34:45

在我的 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})
}
4个回答

感谢@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>
)

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

<input type="text" value={value == null ? '' : value}/>;

问题在于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})
}

当我尚未向select元素添加 onChange 事件处理程序时收到此错误。

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

其它你可能感兴趣的问题
上一篇ReactJs 全局辅助函数 下一篇如何使 vs 代码自动完成 React 组件的 prop 类型？