如何在页面之间传递数据？

Question

我正在进行项目，我必须将数据从一个页面传递到另一个页面。例如，我在第一页上有数据

 let data=[
          {id:1,name:'Ford',color:'Red'},
          {id:2,name:'Hyundai',color:'Blue'}
          ]

我的第一个组件页面，我用名称呈现这个数据列表

class ListDetail extends Component {
    constructor();
    handleClick(data){
    console.log(data);
  }
  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <ul>
          {data.map((data,i) => {
            return <li onClick={this.handleClick.bind(this,data)}>{data.name}</li>
          })}
        </ul>
      </div>
    );
  }
}

我想将这些数据传递到下一页，我需要这些数据和更多的数据。我正在使用反应路由器4.任何建议或帮助都会有所帮助。

Answer 1

您可以使用react-router中的链接组件并将to={}指定为一个对象，您可以在其中指定路径名作为要转到的路径。然后添加变量，例如data保留你想要传递的价值。请参阅下面的示例。

使用<Link />组件：

<Link
  to={{
    pathname: "/page",
    data: data // your data array of objects
  }}
>

使用history.push()

this.props.history.push({
  pathname: '/page',
  data: data // your data array of objects
})

使用上述任一选项，您现在可以按照页面组件中的以下内容访问位置对象上的data。

render() {
  const { data } = this.props.location
  return (
    // render logic here
  )
}

您可以在另一个示例here中看到如何将值与路径一起传递的示例。

来自React Router文档的更多信息可以在下面找到： Link compoment history object

国家管理工具。

当您将大量数据/道具传递给其他组件/页面时。您可能需要考虑使用库来管理您的状态。两个受欢迎的有Redux和MobX。

Answer 2

您可以使用react-router的Link组件并执行以下操作：

<Link to={{
  pathname: '/yourPage',
  state: [{id: 1, name: 'Ford', color: 'red'}]
}}> Your Page </Link>

然后使用this.props.location.state访问数据

您还可以考虑在整个应用程序中使用redux进行状态管理（https://redux.js.org/）。

Answer 3

假设您的其他页面是一个组件，您可以将数据作为支柱传递，这将在下一页上提供。需要注意的是，你必须使用<Link />中可用的react-router 4组件，而不是使用<a></a>，这会导致整页重新加载，从而使数据丢失。