更改此

  const [values, setValues] = useState({intialStateValues});

为此

  const [values, setValues] = useState(intialStateValues);

如果您正在将value属性设置为对象的属性，并希望确保该属性未定义，则可以组合空合并运算符？？带有可选的链接运算符？。如下所示：

<input
  value={myObject?.property ?? ''}
/>

首先设置当前状态。。。此状态

这是因为当您要分配一个新状态时，它可能是未定义的。因此，它也将通过设置状态提取当前状态来固定

this.setState({...this.state, field})

如果您的状态中有一个对象，则应按如下方式设置状态：，假设您必须在用户对象内设置用户名。

this.setState({user:{...this.state.user, ['username']: username}})

警告：组件正在更改要控制的文本类型的非受控输入。输入元件不应从非受控切换到受控（反之亦然）。决定在部件的使用寿命内使用受控或非受控输入元件。

解决方案：检查值是否未定义

反应/Formik/Bootstrap/TypeScript

例子：

{ values?.purchaseObligation.remainingYear ?
  <Input
   tag={Field}
   name="purchaseObligation.remainingYear"
   type="text"
   component="input"
  /> : null
}

我使用react钩子遇到了同样的警告，尽管我之前已经将初始状态初始化为：-

const[post，setPost]=useState（｛title:“”，body:“”｝）

但后来我重写了onChange事件处理程序上预定义状态对象的一部分，

 const onChange=(e)=>{
        setPost({[e.target.name]:e.target.value})
    }

解决方案我通过首先处理前一状态的整个对象（通过使用扩展运算符），然后在其上进行编辑来解决这个问题，

 const onChange=(e)=>{
        setPost({...post,[e.target.name]:e.target.value})
    }

当输入字段值未定义时，此问题的原因是引发react的警告。如果您为多个输入字段创建了一个changeHandler，并且希望使用changeHandler更改状态，则需要使用by spread运算符指定先前的值。就像我这里的代码一样。

constructor(props){
    super(props)
    this.state = {
        user:{
            email:'',
            password:''
        }
    }
}

// This handler work for every input field
changeHandler = event=>{
    // Dynamically Update State when change input value
    this.setState({
        user:{
            ...this.state.user,
            [event.target.name]:event.target.value
        }
    })
}

submitHandler = event=>{
    event.preventDefault()

    // Your Code Here...
}

render(){
    return (
        <div className="mt-5">
       
            <form onSubmit={this.submitHandler}>
                <input type="text" value={this.state.user.email} name="email" onChage={this.changeHandler} />
                
                <input type="password" value={this.state.user.password} name="password" onChage={this.changeHandler} />

                <button type="submit">Login</button>
            </form>
      

        </div>
    )
}