传递道具 React (Typescript) .Net core

Question

我正在尝试将一个 Id（我猜可以看作是一种状态）从一个组件传递到另一个组件

在组件主页中：

interface FetchDataExampleState {
    games: Games[];
    loading: boolean;
}
interface Games {
    g_Id: number;
    g_Title: string;
    g_Genre: string;
    g_Plattform: string;
    g_ReleaseDate: Date;
    g_Price: number;
}

我得到了 2 个接口，我想从中传递 g_Id 以在 EditGame

中使用

我的看跌期权 API:

    [HttpPut("{id}")]
    [Route("EditGame")]
    public async Task<IActionResult> PutGame([FromRoute] int id, [FromBody] Game game)
    {

        game.G_Id = id;

        _context.Entry(game).State = EntityState.Modified;

        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!GameExists(id))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return NoContent();
    }

试图在 EditGame 组件中使用的 fetch im :

handleClick = (e: any) => {
    console.log("Hello");
    fetch("api/Games/EditGame", {
        method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
            g_Title: this.state.g_Title,
            g_Genre: this.state.g_Genre,
            g_Plattform: this.state.g_Plattform,
            g_ReleaseDate: this.state.g_ReleaseDate,
            g_Price: this.state.g_Price,
        })
    })
        .then(response => response.json())
        .then(data => {
            console.log(data)
            this.setState({
                g_Title: data.g_Title,
                g_Genre: data.g_Genre,
                g_Plattform: data.g_Plattform,
                g_ReleaseDate: data.g_ReleaseDate,
                g_Price: data.g_Price,
            });
            let path = '/Home';
            this.props.history.push(path);
        });
}

我的路线：

<Route path='/Home' component={Home} />
<Route path='/EditGame' component={EditGame} />

我试着查找它并尝试了所有的热门结果，包括：

Github
How to pass props to route in react router v5 with Typescript?

我不确定我是否遗漏了什么，因为我是新手，或者我做错了什么。感谢您的帮助:)

Answer 1

尝试使用 React 函数式组件

根据我的经验，或更像这样。

<Route path='/EditGame/:id' component={EditGame} />

props.match.params.id

Answer 2

所以经过很长时间的搜索，我能够解决它如下

<li><Link to={{ pathname: "/EditGame", state: { id: games.g_Id, title: games.g_Title, genre: games.g_Genre, Plattform: games.g_Plattform, rdate: games.g_ReleaseDate, price: games.g_Price } }} >Edit</Link></li>

通过从 home 调用值并将它们通过状态传递到 EditGame，我在 fitch 方法中这样调用它们

 handleClick = (e: any) => {
        console.log("Hello");
        fetch("api/Games/EditGame", {
            method: 'PUT' + this.props.location.state.id, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
                g_Id: this.props.location.state.id,
                g_Title: this.props.location.state.title,
                g_Genre: this.props.location.state.genre,
                g_Plattform: this.props.location.state.Plattform,
                g_ReleaseDate: this.props.location.state.rdate,
                g_Price: this.props.location.state.price,
            })
        })
            .then(response => response.json())
            .then(data => {
                console.log(data)
                this.setState({
                    g_Title: data.g_Title,
                    g_Genre: data.g_Genre,
                    g_Plattform: data.g_Plattform,
                    g_ReleaseDate: data.g_ReleaseDate,
                    g_Price: data.g_Price,
                });
                let path = '/Home';
                this.props.history.push(path);
            });
    }

现在这可能不是最好的方法，但效果很好。

传递道具 React (Typescript) .Net core

Passing props React (Typescript) .Net core

http-put

typescript

reactjs

.net-core