Question

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

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

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

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

我需要一种更好的处理方法可以通过邮寄申请吗？

Answer 1

我假设您使用Link中的react-router？

to中的Link道具不限于字符串值。您可以像这样传递状态：

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

然后在目的地路线，您可以从this.props.location.state访问状态。此值仅适用于特定的浏览器历史记录推送。如果您直接在浏览器中输入网址，则this.props.location.state.someValue将为undefined。

Answer 2

我认为如果你将你的id保存在本地状态，以便链接到另一个组件的组件会更容易处理。

this.state = {
  ids = [];
}

我不确定你是如何得到你的身份证的，通常是你从道具或API获得它们。但只是举例说明如何向您的州添加ID：

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

这样你就可以将它们全部放在一个地方，你可以通过道具将它们发送到另一个组件。

<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。

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

如何在URL中发送长参数列表

2 个答案: