在 onclick() 方法中通過語義反應 ui 卡組件傳遞數據

Question

我正在嘗試在 Semantic React UI 卡組件上通過 onclick 方法獲取傳遞的數據，其簡單目標是鑽入卡組件中顯示的記錄的詳細信息頁面。

我知道這個組件為 onclick() 方法創建了一個反應合成事件，並將（事件、數據）傳遞給定義的 function。

我如何才能看到實際傳遞的內容？ 我嘗試在我定義的 onHandleClick() function 中注銷 JSON.stringify(data) 以查看其中的內容，但我收到“將循環結構轉換為 JSON”錯誤。

我要做的就是將卡上的鍵值傳遞給詳細信息組件，然后我可以過濾掉我的 redux 存儲以獲取單個記錄並將其顯示在詳細信息組件中。

組件如下： Card.js

  newsArticles() {
    if (this.props.content.isLoading) {
      return (
        <Grid.Column stretched>
          <Message>
            <Message.Header>Not Quite There Yet</Message.Header>
            <p>To see your content, please select a channel from the dropdown list above</p>
          </Message>
        </Grid.Column>
      );
    } else {
      const cards = this.props.content.data.map( article => {
        let contentId = article.key;
        return (
          <Grid.Column stretched>
            <Card key={contentId} onClick={ ( event, data) => this.handleOnClick(event, data)} style={{ marginBottom: '2em'}}>
              <Image src={this.props.auth.data.sfInstanceUrl + article.image} />
              <Card.Content>
                <Card.Header>
                  {article.title}
                </Card.Header>
                <Card.Description>
                  {article.excerpt}
                </Card.Description>
              </Card.Content>
            </Card>
          </Grid.Column>
        );
      });
      return cards;
    }
  }

  render() {
    return(
      <Segment placeholder>
        <Grid centered stackable columns="4" textAlign="center" verticalAlign="top">
          <Grid.Row style={{ marginBottom: '2em' }}>
              {this.newsArticles()}
          </Grid.Row>
        </Grid>
      </Segment>
    )
  };

為了處理點擊事件，我只是試圖注銷通過 onclick() 方法傳遞的內容。 最終，我只想將 contentId 變量傳遞給句柄 function..

  handleOnClick( event, data ) {
    // function to navigate to single article
    console.log(`data is: ${JSON.stringify(data)}`);
  }

Answer 1

data 包含props ，其中包含其children項（組件數組）。 每個child都是一個組件，並包含一個引用自身的屬性_owner ，因此出現循環引用錯誤。

因為我相信你對其他道具感興趣，而不是它的children ，你可以這樣做：

  handleOnClick( event, {children, ...data} ) {
    // function to navigate to single article
    console.log(`data is: ${JSON.stringify(data)}`);
  }