传递道具 React (Typescript) .Net core答案

【问题标题】：Passing props React (Typescript) .Net core传递道具 React (Typescript) .Net core
【发布时间】：2021-07-21 18:04:50
【问题描述】：

我试图将一个 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 中使用

我的 Put 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 ：

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} />

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

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

【问题讨论】：

标签： reactjs typescript .net-core http-put

【解决方案1】：

尝试使用 React 函数式组件

根据我的经验或更多类似的。

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

props.match.params.id

【讨论】：

你能告诉我我应该如何处理“props.match.params.id”我不认为只是添加“Route path='/EditGame/:id'component= {EditGame} />" 可以解决问题，因为 id 来自家里，应该发送到 EditGame

【解决方案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 调用值并将它们通过 state 传递给 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);
            });
    }

现在它可能不是最好的方法，但它工作得很好。

【讨论】：