Question

我想问一下以下情况的最佳做法。想象以下情况：

 <Route path='/search/:term?' render={(props) => {
                return (<ProductList
                   items={this.state.DataFromAPI}
                   {...props}
                   />)
              }} />

上面发生的事情是想象我在某处有一个搜索按钮。 当用户点击搜索按钮时，我会

1）从API获取数据并存储在this.state.DataFromAPI

2）还要以编程方式将URL更改为“ / search / someTerm”

现在您可以猜测会发生什么。数据将从第1步到达，并且由于第2步，相应的组件（在本例中为ProductList）也将由路由器呈现，并且ProductList将使用props来获得所需的数据，如代码片段所示。

但是，现在有问题。

如果用户直接在浏览器中输入URL“ / search / someTerm”，则不再进行数据提取。这很清楚，因为正如我之前说的那样，当用户单击按钮时会进行数据获取，并且我会将数据作为道具传递给路线。由于没有点击，因此也没有数据获取。

那么，当我希望在用户键入URL时也要加载数据时，该怎么办？我想组件-在这种情况下是ProductList-本身应该请求数据吗？

Answer 1

我想象一种情况，您想要确保在呈现ProductList时有搜索到的数据。

我的建议是：

传递api方法（您要从中请求数据）组件）到产品列表。
现在在ProductList的componentDidMount方法中进行检查：如果在props中没有获取适当的数据，则使用从位置搜索中获取搜索查询。
当api-request方法在父组件中设置状态时，子代将根据需要重新呈现

。

使用React Router时获取数据的最佳做法

1 个答案: