如何根据兄弟组件设置的 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 组件的状态中设置 submit 并通过 props 在你的子组件中访问它。

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

How can I reload React component based on URL set by sibling component?

javascript

render

reactjs

react-router