在ReactJS中傳遞參數

Question

我正在嘗試在React中的主要細節數據格式之間導航。 源頁面執行此操作：

{myDataList.map(myData =>
    <tr key={myData.dataId}>
    <td>{myData.dataId}</td>
    <td>{myData.dataDescription}</td>
    <td>
        <NavLink to={'/details/' + myData.dataId}>
            Details
        </NavLink>
    </td>

單擊編輯鏈接確實會導航到具有正確URL的詳細信息頁面。 這樣做（主要取自VS中的示例模板）：

interface DetailsState {
    details?: DataDetails;
    loading: boolean;
}

export class Details extends React.Component<RouteComponentProps<number>, DetailsState> {
constructor() {
    super();
    this.state = { details: undefined, loading: true };

    console.log("match params: " + this.props.match.params);

    fetch('api/Data/Details/' + this.props.match.params)
        .then(response => response.json() as Promise<DataDetails>)
        .then(data => {
            this.setState({ details: data, loading: false });
        });
}

我的問題是上述console.log顯示：

TypeError: _this.props is undefined

因此，我無法訪問正在傳遞的dataId 。

顯然，我錯誤地傳遞（或接收）了該參數； 所以我的問題是：傳遞參數的正確方法是什么？ 值得注意的是，我的項目基於VS模板，並且我使用的是tsx，而不是jsx文件。

Answer 1

您無法在組件的構造函數中訪問this.props 。 但是，它可用作第一個參數。 你可以這樣做：

export class Details extends React.Component<RouteComponentProps<number>, DetailsState> {
  constructor(props) {
    super(props);
    this.state = { details: undefined, loading: true };

    console.log("match params: " + props.match.params);

    fetch('api/Data/Details/' + props.match.params)
      .then(response => response.json() as Promise<DataDetails>)
      .then(data => {
        this.setState({ details: data, loading: false });
      });
  }
}

確保在構造函數中首先調用super(props) ，否則React會大吼大叫。

編輯：

正如@Dan指出的那樣，通常不建議在構造函數中執行異步操作。 最好在componentDidMount()這樣做：

export class Details extends React.Component<RouteComponentProps<number>, DetailsState> {
  constructor(props) {
    super(props);
    this.state = { details: undefined, loading: true };

    console.log("match params: " + props.match.params);
  }

  componentDidMount() {
    fetch('api/Data/Details/' + this.props.match.params)
      .then(response => response.json() as Promise<DataDetails>)
      .then(data => {
        this.setState({ details: data, loading: false });
      });
  }
}

Answer 2

如果要在構造函數中訪問props ，則需要將它們傳遞給：

constructor(props) {
    super(props);
}