javascript - React JS:单击后退按钮时传递值

我正在使用React JS创建一个网站，以允许用户单击品牌并从Instagram抓取图像。在着陆页/着陆上，用户可以选择品牌，该品牌名称将传递到Instagram抓取页面/ instagramScraper：

    this.props.history.push({
      pathname: '/instagramScraper',
      params: {
        brandName: this.state.brand_name
      }
    });

instagram刮板页面使用以下代码获取brandName：

this.state.brandName = props.location.params["brandName"];

用户现在可以在此/ instagramScraper上单击图像，并带到另一个页面/ editPhoto，可以在其中编辑图像。从/ editPhoto选择“后退按钮”后，出现以下错误：

TypeError: Cannot read property 'brandName' of undefined new Landing

src/components/instagramScraper.js:24
  21 |   this.onAddImages = this.onAddImages.bind(this);
  22 |   this.onScrape = this.onScrape.bind(this);
  23 |   this.learnMore = this.learnMore.bind(this);
> 24 |   this.state.brandName = props.location.params["brandName"];

从photoEdit页面选择后退按钮时，如何传递brandName参数？我尝试在登录页面中使用this.setState，但是brandName的值被重置。

最佳答案

因此，由于您将其作为参数传递，因此当您返回时，该参数将丢失。除了参数外，您还可以使用查询字符串还是网址路径的一部分？例如。 /landing/instagramScraper/brandName或/landing/instagramScraper?brandName=NAME。这将帮助您将信息保留在位置记录中，然后背面将起作用。另一种选择是使用react-router，它有助于在React SPA上进行路由，并且会处理状态。