Question

所以我有两个React组件，由于某种原因，当我单击另一个转到另一个组件时，它们中的一个再次运行（并导致讨厌的错误）。

我的猜测是，这是因为我正在组件构造函数中运行一些用于地理定位的异步代码，但是我对React的了解还不足以100％确定这一点。

showPosition方法根据用户的位置和其他变量进行API调用。

class Cards extends Component {
      constructor() {
        super();
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(this.showPosition);
        }
        this.showPosition = this.showPosition.bind(this);
      }
    ...

render() {
          if (this.state.isLoading) {
            return <Loading />;
          }
    // The lines below this ALWAYS get run, even several seconds after I 
    // have been on my new component!
          console.log("state value new");
          console.log(this.state.data);
            return (
    <Page className="main-page">
    <div className="cards">
    {this.state.data.merchants.map( (merchant, index) =>
     <CardRow
     merchant={{merchant}}
     count={index}
     className={'card-color-' + index}
      />
  )}
    </div>
    </Page>
);
        }
    }

此卡片组件创建一个称为CardRow的子组件，然后该组件创建多个Card和PromoCard组件子组件。

我不会链接完整的卡，但是我访问中断组件的方式是这种方式-用户单击链接，然后定向到聊天组件：

      <Link to={{
              pathname: "/chat/" + this.state.merchant.id,
              state: {merchant: this.state.merchant}
      }}>

我制作了一个用于聊天的玩具组件，一切正常，但是<Cards />中的render函数再次运行，这弄乱了我的整个聊天界面。

为什么会这样？它与构造函数中的地理位置代码有关吗？还有其他可能吗？

Answer 1

内存泄漏，在构造函数中设置侦听器不是一个好习惯。您必须使用生命周期方法（componentDidMount，componentWillUnmount等）

componentDidMount生命周期方法是设置侦听器的正确位置

<div>

我更改页面后运行React组件

1 个答案: