React router：仅在现有视图上渲染新组件

Question

我试图在两个页面之间切换，但在学习时遇到了许多问题react router

在我的App.js中，有一个底部，单击该底部可将我导航到Cart。

  render()  {
    return (
      <div>
        <button type="button" className="btn btn-primary Bottom-right " onClick={(e) => this.handleSubmit(e)}>
              Confirmed Order
        </button>
        <button type="button" className="btn btn-Primary">
          <Link to="/displayCart" >Show Car</Link>
        </button>
      </div>
    );
  }
}

export default App;

在我的购物车组件中，还有一个类似的按钮，navigtaes会将我返回到App组件。

class Cart extends React.Component {
    constructor(props){
        super(props)

        this.state={
            cartData:null
        }
    }

    componentDidMount() {
        this.callApi()
          .then(res => this.setState({ cartData: res.express}))
          .catch(err => console.log(err));
      }

      callApi = async () => {
          const response = await fetch('/myCart');
          const body = await response.json();
          if (response.status !== 200) throw Error(body.message);

          return body;
      };

    render(){
        return(
            <div className="col">
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to Shopping Center</h1>
                </header>
            </div>
                <div>{ReactHtmlParser(this.state.cartData)}</div>
                <button type="button Bottom-right" className="btn btn-Primary">
                    <Link to="/" >Keep Shopping</Link>
                </button>
            </div>
        )
    }
}

My index.js包含两个组件，app js是默认组件。

    ReactDOM.render(
        <BrowserRouter>
            <switch>
                <div>
                    <Route exact path="/displayCart" component={Cart}/>
                    <Route component={App} />
                </div>
            </switch>
        </BrowserRouter>,
        document.getElementById('root')
    );

现在，它们在许多层面上都是真正的缺陷：

1：当我单击show cart时，而不是渲染新视图。购物车组件在视图顶部呈现，应用程序仍然呈现。

2：单击Show Cart后，我单击Show应用程序返回到我的应用程序组件，但控制台显示：

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Cart (created by Route)

3：如果我更改了App组件中的状态，当我从Cart组件返回到App组件时，状态没有刷新。例如（例如，项目中的布尔值“购买”。）当我从应用程序组件从购物车返回时，状态保持为true，相反，我希望它回到初始状态。

我遵循了教程，但它只是坏了。我到底做错了什么

Answer 1

因此，警告是因为setState正在被

您应该跟踪Cart何时卸载。

您可以通过在购物车组件中创建一个变量，例如\u isMounted，然后使用生命周期事件组件将卸载来跟踪。

componentWillUnmount(){
   _isMounted =false
}

然后在使用setState之前，快速检查以确保\u isMounted为真。

this.callApi()
          .then(res => if(isMounted){
                         this.setState({ cartData: res.express}))
                       }
          .catch(err => console.log(err));

显然，您还需要使用ComponentDidMount将\isMounted更改为true

这里有一篇关于这个话题的文章

关于应用程序的状态不'刷新'...这是因为应用程序组件永远不会卸载和再次安装，因为你从应用程序

要解决此问题，请告诉开关仅装载

        <switch>
            <div>
                <Route exact path="/displayCart" component={Cart}/>
                <Route exact path="/" component={App} />
            </div>
        </switch>

现在，如果您想跟踪状态更改，即使在API调用完成之前关闭（卸载），那么您应该在

不过，只有当你把你的东西放在

我这样做的方式是：-index.js总是加载-在我的内部，然后重定向到显示正确的组件

这意味着它始终处于安装状态。但是，它允许我使用应用程序的状态作为默认的“主”状态，因为我从未卸载它，所以它始终存在。所以如果我有一个子组件，比如。。。我可以给Cart一个函数。无论是否仍安装/显示，此功能都将更改中的状态。

如果你像这样重新构造你的应用程序，那么你可以做以下事情：

App.js添加一个将改变其状态的函数。

changeState(key, value){
   this.setState({
      key : value
   }
}

现在把这个函数作为道具传递出去

    <BrowserRouter>
        <switch>
            <div>
                <Route exact 
                       path="/displayCart" 
                       render={
                         (props) => <Cart {...props} 
                         changeStateinApp={this.changeState} /> 
                       }
                  />
                <Route component={App} />
            </div>
        </switch>
    </BrowserRouter>,

Cart.js现在调用这个函数

this.callApi()
          .then(res => 
              this.props.changeStateinApp(cartData, res.express)
          .catch(err => console.log(err));