Question

我有在父项目组件中呈现的子窗体和输入组件。在父组件中，它们是“不受控制的”，因为其值最初不是由父项目的状态设置的。它们的值由表单组件状态立即设置。 React一直给我这个“警告”（在控制台中注册为错误）。

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

我了解受控组件与非受控组件的问题。但是我如何让React看到孩子在控制输入而不是父母在控制输入并停止给我这个错误？

其他相关信息：这是我创建的一个外部表单模块，因为我的应用程序使用了很多表单，并且我希望通过“ npm install ...”实现标准化的方式。这是sudo代码

    <Parent project module>
    //external forms components
    <Form>
    <Input/>
    <Input/>
    <Button/>
    </Form>
    //end external forms components
    </Parent project module>

这是Form组件中的render方法，它使我可以控制Form组件的Input状态。请让我知道其他代码段或其他信息是否有帮助。我是否会错误地解决此问题，或者有某种方法可以消除这些错误？一切正常，但控制台混乱，难以编写代码。

render() {
    const inputs = React.Children.map(this.props.children, child =>
        React.cloneElement(child, {
            value: this.state.value,
            onChange: this.onChange,
            error: this.state.userNotify[child.props.name]
        })
    );

    return (
        <div id="form-container">
            <p className="formTitle">{this.props.formTitle}</p>
            <form id={this.props.formID} onSubmit={this.onSubmit} >
                {inputs} {/*there must be nested input components passed in*/}
            </form>
        </div>
    )
};

Answer 1

如果尚未设置输入组件的状态值，则可以尝试为其分配回退值。

const inputs = React.Children.map(this.props.children, child =>
  React.cloneElement(child, {
    value: this.state.value || '',
    onChange: this.onChange,
    error: this.state.userNotify[child.props.name]
  })
);

这可确保该值永远不会为undefined或null，从而消除了这些控制台警告。

Answer 2

您必须在状态中体现价值

就像构造函数一样

      this.state = {
           value: null
      }

或者在课堂上

     state = {
           value: null
      }

因此将value：空值更改为“”

Answer 3

谢谢你们的建议。尽管在这种情况下它们不是解决方案，但它们帮助我进行了思考并确定了问题。

我在Input组件上有一个道具叫做prepPopVal。我用它来预填充一些值。例如;查看现有数据时，可以使用我的“表单/输入”组件显示该数据。在父项目中看起来像这样

<Parent project module>
//external forms components
<Form>
<Input prePopVal={this.state.someValue}/>
<Button/>
</Form>
//end external forms components
</Parent project module>

我使用了这样的条件

 if(typeof this.props.prePopVal === 'undefined')
      var value = this.props.value;
    else
      var value = this.props.prePopVal;

然后将“ value”变量放置为html输入的值

   <input className="textinput"
          type={type}
          id={this.props.name}
          name={this.props.name}
          value={value}
          onChange={this.props.onChange}
          autoComplete="off"
        />

我应该做的是消除设置“值”的条件逻辑，而只使用“ ||”输入中的运算符来决定使用哪个，例如：

<input className="textinput"
      type={type}
      id={this.props.name}
      name={this.props.name}
      value={this.props.prePopVal || this.props.value}
      onChange={this.props.onChange}
      autoComplete="off"
    />

这样，如果未定义“ prePopVal”，它将使用“值”。这清除了我的控制台错误。

再次感谢。我希望这个问题对某人有用。

在子组件中反应警告不受控制的组件

3 个答案: