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

Question

所以我有从 componentDidMount 中的 api 获得的数据，然后我在渲染器中映射它。假设地图 returns 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>

所以假设上面 returns 4 个对象。我想要第三个，当单击 link 以传递其数据时。

Answer 1

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

Answer 2


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 中接收数据作为 props。如果你想检查，你可以在 NewComponent 中编写 componentWillReceiveProps() 方法：

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

Answer 3

好的，我已经通过将评论中的各个部分拼凑在一起解决了这个问题，感谢您的贡献。是这样解决的：

在 link 标签上我这样做了：

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

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

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

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

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

passing mapped data from an api to another component

reactjs

array.prototype.map

react-router-dom