Javascript 如何仅在reactjs的文本字段中的特定对象值为空时显示错误注释

我的目标是在onChange方法的textfield中未输入任何值时，显示特定对象id的错误。但它出现在另一个id文本字段中

JSON数据如下所示：

"details": [
      { "id": "12wer1", "name": "ABC", "age": 15 },
      { "id": "78hbg5", "name": "FRE", "age": 21 }
    ]

{this.state.details.map((y) => (
              <Grid container justify="center" spacing={2}>
                <Grid item xs={3}>
                  <TextField label="Name" name="dName" variant="outlined" value={y.name}
 onChange={(e)=>this.onChange(e.target.name, e.target.value)}
/>
                </Grid>
                <Grid item xs={3}>
                  <TextField label="Age" name="age"variant="outlined" value={y.age} onChange={(e)=>this.onChange(e.target.name, e.target.value)}/>
 <FormHelperText >
                                        {this.state.errors.age}
                                    </FormHelperText>
                </Grid>
              </Grid>
            ))}

我试过这样做：

"details": [
      { "id": "12wer1", "name": "ABC", "age": 15 },
      { "id": "78hbg5", "name": "FRE", "age": 21 }
    ]

{this.state.details.map((y) => (
              <Grid container justify="center" spacing={2}>
                <Grid item xs={3}>
                  <TextField label="Name" name="dName" variant="outlined" value={y.name}
 onChange={(e)=>this.onChange(e.target.name, e.target.value)}
/>
                </Grid>
                <Grid item xs={3}>
                  <TextField label="Age" name="age"variant="outlined" value={y.age} onChange={(e)=>this.onChange(e.target.name, e.target.value)}/>
 <FormHelperText >
                                        {this.state.errors.age}
                                    </FormHelperText>
                </Grid>
              </Grid>
            ))}

其他ID中也有错误。例如，我想清除第一个id的年龄，然后两个id上都显示错误

---

有人能帮我纠正这个错误吗？

我们必须这样做

import React from "react";
import { Grid, TextField, FormHelperText } from "@material-ui/core";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      details: [
        { id: "12wer1", name: "ABC", age: 15 },
        { id: "78hbg5", name: "FRE", age: 21 }
      ],
      errors: {
        name: {},
        age: {}
      }
    };

    this.onNameChange = this.onChange.bind(this, "name");
    this.onAgeChange = this.onChange.bind(this, "age");
  }

  onChange = (property, id, e) => {
    const value = e.target.value;
    let { details, errors } = this.state;
    details.forEach((d) => {
      if (d.id === id) {
        d[property] = value;
        errors[property][id] = value === "" ? `${property} is required` : "";
      }
    });

    console.log(errors);

    this.setState({
      details: details,
      errors: errors
    });
  };

  render() {
    return (
      <div className="App">
        {this.state.details.map((y) => (
          <Grid container justify="center" spacing={2}>
            <Grid item xs={3}>
              <TextField
                label="Name"
                name="dName"
                variant="outlined"
                value={y.name}
                onChange={(e) => this.onNameChange(y.id, e)}
              />
              <FormHelperText>
                {this.state.errors.name[y.id] || ""}
              </FormHelperText>
            </Grid>
            <Grid item xs={3}>
              <TextField
                label="Age"
                name="age"
                variant="outlined"
                value={y.age}
                onChange={(e) => this.onAgeChange(y.id, e)}
              />
              <FormHelperText>
                {this.state.errors.age[y.id] || ""}
              </FormHelperText>
            </Grid>
          </Grid>
        ))}
      </div>
    );
  }
}

从“React”导入React；
从“@material ui/core”导入{Grid，TextField，FormHelperText}；
导入“/styles.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
详情：[
{id:“12wer1”，姓名：“ABC”，年龄：15}，
{id:“78hbg5”，姓名：“FRE”，年龄：21}
],
错误：{
姓名：{}，
年龄：{}
}
};
this.onNameChange=this.onChange.bind（这个“名称”）；
this.onAgeChange=this.onChange.bind（这个“年龄”）；
}
onChange=（属性，id，e）=>{
常量值=e.target.value；
让{details，errors}=this.state；
详细信息。forEach（（d）=>{
如果（d.id==id）{
d[财产]=价值；
错误[property][id]=value==“”？`${property}是必需的`:“”；
}
});
console.log（错误）；
这是我的国家({
详情:详情,，
错误：错误
});
};
render（）{
返回(
{this.state.details.map（（y）=>(
this.onNameChange（y.id，e）}
/>
{this.state.errors.name[y.id]| |“”}
this.onAgeChange（y.id，e）}
/>
{this.state.errors.age[y.id]| |“”}
))}
);
}
}

我们基本上必须将每个错误的对象与其特定的渲染元素链接起来。 以下是相同的运行代码：