Реакция неконтролируемого компонента предупреждения в дочернем компоненте

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 ...». Это код sudo

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

Вот метод рендеринга в компоненте Form, который позволяет мне контролировать состояние ввода с помощью компонента Form. Пожалуйста, дайте мне знать, будут ли полезны другие фрагменты кода или другая информация. Я иду об этом неправильно или есть какой-то способ избавиться от этих ошибок? Все работает нормально, но это загромождает мою консоль и затрудняет кодирование.

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

Вы должны иметь значение, инициализированное в состоянии

Как в конструкторе

      this.state = {
           value: null
      }

Или на уровне класса

     state = {
           value: null
      }

Итак, измените значение: с нуля на значение: ""

Answer 2

Спасибо вам обоим за ваши предложения. Хотя они не были решениями в этом случае, они помогли мне продумать и определить проблему.

У меня есть опора для компонента 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» не определено, используется «значение». Это очистило мою консольную ошибку.

Еще раз спасибо. Надеюсь, этот вопрос кому-нибудь пригодится.

Answer 3

Вы можете попытаться назначить запасное значение для ваших входных компонентов, когда их состояние еще не установлено.

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, тем самым удаляя эти предупреждения консоли.