无法在按钮单击时在新路由上的新页面中呈现组件答案

【问题标题】：Unable to render component in a new page on a new route on button click无法在按钮单击时在新路由上的新页面中呈现组件
【发布时间】：2021-04-13 15:26:26
【问题描述】：

我对反应很陌生，刚开始用它构建一个基本的 crud 应用程序。除了更新功能外，一切都完成了，我卡在那里。我有几个带有 2 个按钮的引导卡，删除和更新。数据来自 mysql 数据库，并通过休眠（后端的弹簧启动）持久化。按下时更新按钮应该传递 id 并渲染一个新组件（在不同的路线上，我猜我需要在这里使用链接），其中显示了一个带有相应对象详细信息的填充表单。一旦用户更新表单并点击提交，他应该被重定向到卡片页面。到目前为止，我被困在按钮 + 链接并渲染新组件阶段，由于某种原因，我似乎无法理解如何使其工作。这是我的代码到目前为止

这是我的 JSX，其中我有更新按钮，该按钮位于 CarList 组件的渲染方法中，其中包含所有卡片。

<ReactBootstrap.Card.Body>
            <ReactBootstrap.Card.Title>{cars.mark}-{cars.model}</ReactBootstrap.Card.Title>
               <ReactBootstrap.Card.Header>Price: {cars.price}</ReactBootstrap.Card.Header>
                 <br />
                     <h6>Fabricated: {cars.year}</h6>
                       <h6>{cars.fuel}</h6>
                         <ReactBootstrap.Button variant="success" className="cardButtons" id="cardButtonGreen" onClick={() => this.handleClickUpdate(cars.id)}> Update</ReactBootstrap.Button>
                         <ReactBootstrap.Button variant="danger" className="cardButtons" id="cardButtonRed" onClick={() => this.handleClickDelete(cars.id)}> Delete</ReactBootstrap.Button>
                       </ReactBootstrap.Card.Body>
                    </ReactBootstrap.Card>
               </div>
             }
        <br />
   </div>

这是我的 CarList 类和构造函数

class CarList extends Component {

    constructor(props) {
        super(props)

        this.state = {
            cars: [],
            error: "",
            deleteError: "",
            updateError: "",
            updateCarId: null,
            buttonWasPressed: false
        }
    }

这里我有点击时触发的功能。我将状态设置为更新按钮所在的特定卡片中的对象的 ID。

handleClickUpdate = (carId) => {
        console.log(carId);
        this.setState(
            {
                updateCarId: carId,
                buttonWasPressed: true
            }
        )
    }

最后，我通过传入 ID 来渲染我想要渲染的组件 MyComp。Line 位于 Card 所在的组件 CarList 中。

 {this.state.buttonWasPressed && <MyComp carId={this.state.updateCarId} />}

到目前为止，这段代码给我的信息是，我能够将状态设置为 id，然后使用按钮显示组件，但它显示在同一页面上，就在卡片下方（其中代码行也位于）而不是在新路由的新页面中显示它。我尝试添加 Link、Switch、Route、Router，但恐怕我不确定如何在这个确切的上下文中使用它按钮，这让我很困惑，所以我无法让它工作。你能帮我在具有该 ID 的新页面上呈现“MyComp”吗？任何帮助将不胜感激。

【问题讨论】：

为什么不将update 按钮更改为按钮样式的link？然后您可以简单地导航到诸如update/id 之类的网址。执行您的更新逻辑，然后重定向回您完成的位置。

标签： javascript html reactjs react-router jsx

【解决方案1】：

您需要的是一个全局存储，例如 Redux 或 Mobx。这样您就可以使用相关数据更新状态并在新页面上检索它们。

如果您需要解决方法，可以使用history.pushState()

基本上，您可以推送到您的位置并使用它的状态。

在下一页，在本例中为 MyComp，您可以使用 history.state 检索推送的数据。

【讨论】：