Question

所以我有从componentDidMount中的api获取的数据，然后在渲染器中对其进行映射。可以说地图返回了4个对象。如何创建一个按钮单击事件来捕获特定对象的数据，然后将其沿路由传递到另一个组件？

代码：


clickEvent(){
???
}

this.example = this.state.data.slice(1).map((data, key) =>

<div key={item.Id}>
<div>{data.dataIWantToPass}</div>
<Link to='/next_component_path' onClick={clickEvent}}>Click</Link>
</div>

所以可以说上面返回了4个对象。我想要第三个，当单击链接以传递其数据时。

Answer 1


clickEvent(dataUWantToPass){
    <NewComponent dataPassed={dataUWantToPass} />
}

this.example = this.state.data.slice(1).map((data, key) =>
    <div key={data.Id}>
        <div>{data.dataIWantToPass}</div>

        //Link is a react-router-dom component, this helps you to redirect to other component (to which you have added the route for
        <Link to='/next_component_path'>                        
            <button onClick={()=>this.clickEvent(data.dataIWantToPass)} value="Click"/>
        </Link>
    </div>
))

您可以作为道具在NewComponent中接收数据。如果要进行检查，则可以在NewComponent中将componentWillReceiveProps（）方法编写为：

componentWillReceiveProps(reveivedProps){
    console.log(reveivedProps);
}

Answer 2

好的，我已经解决了这一问题，将注释中的各个部分拼凑在一起，因此，谢谢您的贡献。解决方法如下：

在链接标签上，我这样做：

<Link to={{ pathname: '/path', query:{passed_id: data.id} }}></Link>

然后在路径路由到的组件上：

this.setState({passed_id: this.props.location.query.passed_id});

这使我可以访问正在传递的数据，在本例中为ID。现在，我只需要弄清楚如何将该ID与我也通过（通过本地存储）传递的循环数据进行比较，并对其进行映射。我想另一个问题。

Answer 3

您需要使用redux。这使您可以将数据存储在全局应用程序存储中，并从订阅该存储的任何组件中获取数据。如今，几乎每个React项目都需要Redux来管理整个应用程序中的数据

将映射的数据从api传递到另一个组件

3 个答案: