Компонент меняет контролируемый ввод текста типа на неуправляемый - ReactJS - PullRequest
Новая
       15

Компонент меняет контролируемый ввод текста типа на неуправляемый - ReactJS

0 голосов
/ 06 июля 2019

У меня есть страница, где я получаю данные с сервера и устанавливаю значение в состоянии для контролируемых входов. (Например, у меня есть входное значение, которое имеет значение this.state.name, я выбираю имя с сервера, например, Дейва, и устанавливаю его в состояние как имя, поэтому значение ввода - Дейв. Это работает, но у меня проблема с массивом объектов

так что это состояние 

this.state = {
        ingredients: [{ ingredient: "", quantity: '' }],
        //other properties
   }

и вот как я использую ingredients

{this.state.ingredients.map(({ ingredient, quantity }, index) => (


   <div key={index}>
        ingredient: <input value={ingredient} className="ingredientClass" type="text" autoComplete="off" placeholder="e.g: pepper" onChange={{e => this.update(index, "ingredient", e.target.value)} />
        quantity: <input value={quantity} autoComplete="off" type="text" placeholder="e.g: 1g" onChange={e => this.update(index, "quantity", e.target.value)} />
        <button onClick={this.BtnClick}>delete</button> <br />
       {this.state.errorFor === 'ingredientsfield' ? this.state.errmsg : null}
   </div>
))}

Но это вызывает эту ошибку:

Предупреждение. Компонент изменяет управляемый ввод текста типа на неуправляемый. Входные элементы не должны переключаться с контролируемого на неуправляемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента. Дополнительная информация: link

Почему это происходит? Как я могу это исправить?

P.S: я проверил, и ингредиенты успешно получены с сервера

ОБНОВЛЕНИЕ: код события onChange 

update(index, key, value) {
    this.setState(({ ingredients }) => ({ ingredients: ingredients.map((ing, i) => i === index ? { ...ing, [key]: value } : ing) }));
    console.log(this.state.ingredients)
}

1 Ответ

2 голосов
/ 06 июля 2019

Проблема в том, что один из входов имеет неопределенное или нулевое значение в какой-то момент.

Я не могу понять, что меняет ваше входное значение на ноль (неопределенное) из кода, который вы показываете. Но вы можете использовать ReactDevTools, чтобы наблюдать значение ввода во время работы приложения.

...