Question

我正在使用React JS创建一个网站，允许用户点击一个品牌并从Instagram中删除图像。在着陆页 / landing ，用户可以选择一个品牌，并将此品牌名称传递给Instagram刮刀页 / instagramScraper ：

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

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

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

用户现在可以点击此 / instagramScraper 上的图片，然后转到另一个页面 / editPhoto ，可以在其中编辑图像。选择＆＃34;后退按钮＆＃34;从 / 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的值会重置。

Answer 1

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

Answer 2

你需要使用

this.state = {
  brandName: ...
}

而不是构造函数中的this.state.brandName = ...

React JS：单击后退按钮时传递值

2 个答案: