如何在 URL 中发送一长串参数答案

【问题标题】：How to send long list of parameters in URL如何在 URL 中发送一长串参数
【发布时间】：2018-11-24 06:55:03
【问题描述】：

我的项目的一个组件中有以下链接

<Link to={`http://localhost:8080/project/path/items?ids=18,19`}>
  {itemCount}
</Link>

它重定向到另一个组件。该组件从 url 中提取 ids 列表并显示结果

现在我的问题是当ids 列表变得足够大（数万）时它不起作用。

我需要更好的方法来处理这个问题是否可以通过发布请求？

【问题讨论】：

如果您使用的是 redux，则将这些 id 保存到 state 中，然后在不同的组件上获取该 state。
如何在新标签页中打开链接？
一个更常见的设计是在/items上根据分页、排序、过滤和显示项目在/item/{id}上显示项目，从而避免了这个问题。

标签： reactjs react-router react-redux url-routing url-parameters

【解决方案1】：

我假设您使用的是来自react-router 的Link？

Link 中的 to 属性不限于字符串值。你也可以像这样传递一个状态：

  <Link
    key={i.id}
    to={{
      pathname: `/someUrl`,
      state: { someValue: 'asdad', someArray: [1, 2, 3] }
    }}
  >

然后在目标路由处，您可以从this.props.location.state 访问状态。该值仅存在于特定的浏览器历史推送中。如果直接在浏览器中输入网址，this.props.location.state.someValue 将是undefined。

【讨论】：

【解决方案2】：

我认为，如果您将您的 id 保存在本地状态中，以用于应该链接到其他组件的组件，则处理起来会更容易。

this.state = {
  ids = [];
}

我不知道你是如何得到你的 id 的，通常你是从 props 或 API 中得到的。但只是为了举例说明如何将 id 添加到您的状态：

componentDidMount() {
  this.setState({
    ids: [18, 19, 20, 21]
  })
}

这样你就可以把它们都放在一个地方，你可以通过 props 把它们发送到另一个组件。

<MyComponent ids={this.state.ids.toString().split(',').join()} />

创建你的新组件（不知道你的经验如何）：

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    let itemCount = {this.props.ids.length}

    return(
      <Link to={`http://localhost:8080/project/path/items?ids={this.props.ids}`}>
        {itemCount}
      </Link>
    )
  }
}

重要的是要知道应该在屏幕上显示的每个元素都需要保存在客户端设备的内存中。因此，在不注意性能问题的情况下渲染数千个元素将是一项挑战。如果您注意到应用程序变慢或需要很长时间加载，您应该准备好显示所有 id 的批次。

“批处理”长列表的两种常用方法是分页或延迟加载。

【讨论】：