组件将文本类型的受控输入更改为不受控制-ReactJS [英] A component is changing a controlled input of type text to be uncontrolled - ReactJS

问题描述

我有一个页面，我从服务器中获取数据并为受控输入设置状态值.(例如，我输入的值为 this.state.name ，我从服务器获取名称，例如Dave，并将其设置为name，因此输入的值为Dave.它可以工作，但我得到了对象数组出现问题

I have a page where i fetch data from server and setting value in state for controlled inputs. (e.g I have input which has value of this.state.name, i fetch name from server for example Dave and set it in state as name, so value of input is Dave. it works but i got problem with array of objects

这就是状态

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

这就是我使用成分

{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

为什么会这样?我该如何解决?

Why is that happening? How can I fix it?

P.S:我检查了一下，然后从服务器成功获取了食材

P.S: i checked and ingredients are succesfully fetched from server

更新:onChange事件的代码

UPDATE: code of onChange event

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

推荐答案

问题是输入之一在某些时候具有未定义或空值.

The problem is that one of inputs has undefined or null value at some moment.

我不明白您显示的代码将输入值更改为null(未定义)的原因.但是您可以在应用程序运行期间使用ReactDevTools观察输入的值.

I can't understand what changes your input value to null (undefined) from the code you show. But you can use ReactDevTools to observe the value of the input during your application running.

这篇关于组件将文本类型的受控输入更改为不受控制-ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！