Question

我有一个包含数据的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" },
             ]
  }

这是显示卡片的Parent类。单击卡片后，它将导航到另一个名为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>
         )
              } 
        }

在DataForm组件中，表单字段的状态为：

        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 })

        }

在DataForm中，我希望类型字段具有默认值“ hetero”或“ homo”。但是这里显示错误为：

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

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

谢谢。

Answer 1

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

如何在渲染之前将组件的初始状态设置为其他状态？

1 个答案: