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

在ReactJS中传递参数

2 个答案: