javascript - 如何根据兄弟组件设置的 URL 重新加载 React 组件？

Question

我有 Main 组件，它包含以下代码并且工作正常。

<Switch>
<Route path='/compare' component={Compare} />
<Route exact path='/' component={Home} />
<Route path={`/search`} component={Search} />
<Route path={`/:vehicleId`} component={VehicleDetail} />
</Switch>

您在上面看到的 Search 组件有一个搜索输入框，使用时会显示搜索结果。我想从搜索组件中取出搜索框并将其放在我的导航栏中，但在从导航栏搜索时在搜索组件中显示结果。这是我的 App.js 的样子。

<div>
 <Navbar/> <-- search box is here now
 <Main/> <-- I have to show the result in here now, inside Search component
 <Footer/>
</div>

我正在尝试使用以下代码从 Navbar 组件设置 URL，它工作得很好。

this.props.history.push(`/search?q=${query}`)

但是，只有 URL 得到更新，但是当我已经在“搜索”页面中时，Search 组件不会重新呈现。换句话说，当我从另一个 URL 搜索时，我可以加载搜索组件，但是一旦我登陆 domain.com/search?q=mercedes 我就看不到搜索结果重新呈现如果我搜索 peugeot，它会将 URL 更新为 domain.com/search?q=peugeot 但仍然显示上次搜索的结果，即 mercedes。

如何重新呈现 Search 组件？

更多信息搜索组件代码如下:

state = {
        query   : (new URL(document.location)).searchParams.get('q'),
        submit  : false,
        result  : []
    }

    componentDidUpdate() {
        if (this.state.submit) {
            let url = `${data.api}api/all/?search=${this.state.query}`
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    this.setState({
                        result : data
                    })
                })
            this.setState({ submit : false })
        }
    }

    componentDidMount() {
        let url = `${data.api}api/all/?search=${this.state.query}`
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({
                    result : data
                })
            })
    }

这非常有效，因为搜索框位于搜索组件内。但是，当我执行 history.push 并从同级 Navbar 组件更新 URL 时，此代码不起作用。

Answer 1

发生这种情况是因为在您的 componentDidUpdate 中您正在检查 this.state.submit 这是错误的因此它不起作用

因为现在你在另一个组件中，你需要找到一种方法来在你的状态中设置这个提交。

解决方案:

将所有状态和 handleClick() 处理程序从 Header 移动到您的 MainWrapper 组件。然后将值作为 props 传递给需要共享此功能的所有组件。

通过这种方式，您可以在 MainWrapper 组件的状态中设置提交，并通过 props 在您的子组件中访问它。