Javascript 在渲染之前，如何使用另一种状态设置组件初始状态？

我有一个包含数据的json文件

  {
    data = [ {name: 'abc", label: "ABC",type: "hetero", path:"/assets/data/source1.jpg" }, 
             {name: 'pqr", label: "PQR",type: "homo", path:"/assets/data/source2.jpg" },
             {name: 'xyz", label: "XYZ",type: "hetero", path:"/assets/data/source3.jpg" },
             ]
  }

这是显示卡片的父类。单击卡片，它将导航到另一个组件，即DataForm

class MainDataCard extends React.Component{

 onClickForm = card => {
      const {action} = this.props;  // action value can be add/update. Currently action = "add"
      this.props.history.push(`/user/${action}/${card.label}`);
    };
  render() {
                {data.map((card, index) => {
    return (
      <Card
        key={index}
        className="cardStyle"
        onClick={() => {
          this.onClickForm(card);
        }}
      >
        <CardContent className="cardContent">
          <Grid container>
            <Grid item md={12}>
              <img src={card.path} alt="card" />
            </Grid>
            <Grid item md={12}>
              <Typography color="textSecondary" gutterBottom>
                {card.name}
              </Typography>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
         )
              } 
        }

在数据表单中，我希望类型字段有一个默认值“hetero”或“homo”。但有一个错误显示为：

无法读取未定义的属性类型

如何获取类型字段中的默认值

---

提前感谢。

您的组件可能无法访问此.tempData.type。请提供组件的完整代码

        state = {
           dataForm: {
                  name: "",
                  type: this.tempData.type,
                  userName: "",
                  password: ""
                    },
                  tempData: {}
                  }

    componentDidiMount(){
          const {label} = this.props.match.params;
          let temp ={};
          {data.map((card) => {
              if(data.label === label) {
                temp =data;
                 }
           })};
             this.setState({ tempData : temp })

        }