Reactjs 反应：如何设置错误消息？

我正在尝试设置错误消息，但由于处于已传递初始值对象的状态，因此无法设置状态。我如何在react中实现这一点？如何在“设置状态”功能中设置错误消息？有人能帮我吗？。在控制台日志记录之后，它将在控制台中显示错误。但是我怎样才能在屏幕上显示这个呢？提前谢谢

代码如下：

常量初始值={
可交付成果名称：“”，
到期日：新日期（），
可交付成果注释：“，
基于里程碑的支付：错误，
可交付成果名称错误：“”，
到期日错误：“”，
可交付成果注释错误：“”
}
类MileStoneForm扩展了组件{
建造师（道具）{
超级（道具）
这个州={
初始值
}
}
handleChange=（e，type）=>{
设错误=true
如果（类型==‘可交付成果注释’）{
如果（例如，目标值长度>300）{
错误=错误
this.setState（{可交付内容注释错误：'Description必须包含少于300个字符'）
}
}
如果（错误）{
这是我的国家({
[类型]：即目标值，
[类型+“\u错误]：“”
})
}
}
validateMileStoneName=（）=>{
如果（！this.state.initialValues.deliverable_name | | this.state.initialValues.deliverable_name.length<4）{
console.log（“输入可交付成果名称”）
this.setState（{deliverable_name_error:'请输入deliverable name'}）
}
}
validateMileStoneDueDate=（）=>{
如果（！this.state.initialValues.due\u date）{
this.setState（{due_date_error:'Please enter due date'}）
}
}
validateMileStoneDescription=（）=>{
如果（！this.state.initialValues.deliverable_notes）{
this.setState（{deliverable\u notes\u error:'Please enter description'}）
}
}
handleSubmit=（数据）=>{
this.validateMilstoneneName（）
this.validateMileStoneDescription（）
console.log（数据）
此.props.handleData（数据）
}
render（）{
const{initialValues}=this.state
返回(
添加里程碑
可交付成果名称
this.handleChange（e，'initialValues.deliverable_name'）}
value={initialValues.deliverable_name}
maxLength=“100”
自动对焦={true}/>
{initialValues.deliverable\u name\u错误&&(
{initialValues.deliverable_name_error}
)}
到期日
this.handleChange（e，'due_date'）}
value={initialValues.due_date}/>
{initialValues.due\u date\u错误&&(
{initialValues.due\u date\u error}
)}
可交付票据
在下面添加说明
this.handleChange（e，'deliverable_notes'）}
value={initialValues.deliverable_notes}/>
{initialValues.deliverable_notes_error&&(
{initialValues.deliverable_notes_error}
)}
this.handleSubmit（initialValues）}
/>
)
}
}
导出默认的MileStoneForm

3件事

我会将错误消息移动到状态内部

在这里输入代码 可交付成果名称错误：“”， 到期日错误：“”， 可交付成果注释错误：“”

更新

此.setState

-已完成

显示错误消息-也正在执行

---

基本上，如果您将所有内容从

初始值

移动到

状态

，您的代码应该可以工作。

您正在将

初始值

与您正在设置的属性混合在一起。因此，发生错误后，您的状态实际上如下所示：

this.state = {
  initialValue: [object] // this could potentially mutate (a bug).
  deliverable_notes_error: "Please set ....",
}

您需要做的是使用设置初始状态：

构造函数（道具）{
此.state={
…initialValues//您的状态现在是对象的软克隆
};
}
渲染（道具）{
const{deliverable_notes_error}=this.state；
返回(
{可交付成果注释错误&{可交付成果注释错误}
);
}

单击“添加”按钮时，我正在传递initialvalues对象，从那里它通过传递initialvalues对象调用handleSubmit。我在数组中推送此对象，这就是我这样做的原因，但handleChange方法仍然不起作用，并且没有设置错误消息。

this.state = {
  initialValue: [object] // this could potentially mutate (a bug).
  deliverable_notes_error: "Please set ....",
}