javascript - 发送数据时 history.push() 不起作用

Question

我在 Main 组件中定义了一个路由：

<Route path="/user/:action?/:name?" component={DataForm} />

MainDataCard 组件：

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

我正在遍历数据数组和每张卡片的 onClick，我将导航到另一个组件，即 DataForm。推送时，我需要发送选定的卡片对象。

{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>


       onClickForm = card => {
          const {action} = this.props;  // action value can be add/update. Currently action = "add"
          this.props.history.push({
          pathname: `/user/${action}/${card.label}`,
         state: { card: card }
          });
        };

在 DataForm 组件中，它显示该卡是未定义的。这意味着数据没有被发送到 DataForm 组件。为什么会这样？

提前致谢。

标签： javascriptnode.jsreactjs