我应该忽略 React 警告：输入元素不应从不受控切换到受控吗？

Question

错误代码

警告：组件正在更改要控制的时间类型的不受控输入。输入元素不应从不受控切换到受控（反之亦然）。在组件的生命周期内决定使用受控输入元素还是不受控输入元素。

说明

所以我有一个组件可以根据数组中的项目动态呈现多个输入字段。我的数组包含 7 天，我每天循环多个输入字段。这些输入字段中的每一个都有一个操作。通过单击按钮，我可以选择某些输入字段是否需要具有相同的内容或不同的内容。这些输入字段中的每一个也需要具有唯一的状态。所以，我创建了一个这样的空状态：

constructor(props) {
        super(props);
        this.state = {};
    }

并像这样在我的循环中创建它：

() => this.setState({ ['show' + day + '_morning'] : true })
() => this.setState({ ['show' + day + '_afternoon'] : true })

虽然我可以将这些状态中的每一个预定义为“showMonday_morning”等。但我试图避免它，因为我想学习如何在循环中动态创建状态以供将来参考。

一切正常，但我从上面收到错误代码。

问题

我可以轻视这个错误还是应该解决这个问题？如果必须解决，如何在循环内动态创建和添加状态并避免此错误？

Answer 1

您不需要在构造函数中动态创建状态。相反，您可以有条件地在渲染中使用它。

<input value={this.state.['showSatMorning'] || ''} />

我可以轻视这个错误还是应该解决这个问题？

虽然此警告不会影响您应用中的任何内容，但最好处理此类警告以保持您的应用一致并避免意外问题

Answer 2

据我所知，React.js 告诉您决定使用一种类型的 Input 元素，受控或不受控，如果您将它们都放在一个组件中，您将看到该警告，我建议您制作一个自定义的 InputComponent，你可以在你的 React 应用中使用它。

这个警告不被认为是危险的，它是为了更干净的 React 和优化。