小编Gri*_*420的帖子

这是我第一次在 React 中使用 typescript，我遇到了 typescript 错误带来的巨大麻烦Module has no exported member .ts(2305)。以下是发生这种情况的 2 个示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

错误：

'"react-router-dom"' has no exported member named 'Routes'. Did you mean 'Route'?ts(2724)

和这里

import { useNavigate } from 'react-router';

错误：

Module '"react-router"' has no exported member 'useNavigate'.ts(2305)

最后一个例子：

import { MaterialCommunityIcons } from 'react-native-vector-icons';

错误：

Module '"react-native-vector-icons"' has no exported member 'MaterialCommunityIcons'.ts(2305)

这是我的 package.json 文件（如果有帮助的话）：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": …

我正在尝试使用react-router-dom版本6中的useNavigate将变量发送id到另一个页面。这是我正在尝试的：

const handleSelect = (id: number) => {
    navigate('/Players', {
      userId: id,
    });
  };

但是我收到错误：Argument of type '{ userId: number; }' is not assignable to parameter of type 'NavigateOptions'. Object literal may only specify known properties, and 'userId' does not exist in type 'NavigateOptions'.ts(2345)

我找不到有关 NavigateOptions 或它正在寻找的类型的任何有用信息。如果我删除该参数，那么我可以很好地userId导航到该页面。Player这只是导致问题的参数。对于这个问题我能做什么？有人可以提供一些这方面的文档吗？

NavigateOptions 类型的参数示例是什么？

不允许在标题中说帮助，但我需要帮助理解这个模板。我第一次尝试使用 ASP.NET Core Web 应用程序 React 项目模板。我已经对 React 有一定的了解，但不熟悉这个项目模板。该模板附带一个小型天气 api，FetchData 页面向该 API 发出获取请求。

首先，我不知道 React 到底从哪里发出请求，其次我不知道如何复制它。

这是获取数据方法：

获取数据

import React, { Component } from 'react';

export class FetchData extends Component {
  static displayName = FetchData.name;

  constructor(props) {
    super(props);
    this.state = { forecasts: [], loading: true };
  }

  componentDidMount() {
    this.populateWeatherData();
  }

  static renderForecastsTable(forecasts) {
    return (
      <table className='table table-striped' aria-labelledby="tabelLabel">
        <thead>
          <tr>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
          </tr>
        </thead>
        <tbody>
          {forecasts.map(forecast =>
            <tr key={forecast.date}>
              <td>{forecast.date}</td>
              <td>{forecast.temperatureC}</td>
              <td>{forecast.temperatureF}</td>
              <td>{forecast.summary}</td>
            </tr> …

我有这个 React/Typescript 页面：

玩家页面.tsx

import React, { useState, useEffect } from 'react';
import { Page } from './Page';
import { PageTitle } from './PageTitle';
import { Button, Card } from 'react-bootstrap';

function PlayersPage() {
  const [isLoading, setIsLoading] = useState(false);
  const [playersData, setPlayersData] = useState([]);

  //Fetch all players from database
  useEffect(() => {
    //setIsLoading(true);
    fetch('http://localhost:44326/api/Players')
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
      })
      .then((data) => setPlayersData(data));
    //.then(setIsLoading(false));
  }, []);

  return (
    <Page>
      <div style={{ padding: 20 }}>
        <PageTitle>Toons</PageTitle>
      </div> …