如何访问和传递 return 方法中定义的变量值，并将其传递给 reactjs 中的另一个组件?

Question

我想传递返回方法中定义的变量值并将其传递给另一个组件。

下面是代码片段，

class componentname extends React.Component {
state = {
cards: [],
};
render = () => {
return (
<div className="list">
<table>
<thead>
<tr>
<th>name</th>
<th>something</th>
<th>noname</th>
</tr>
</thead>
<tbody>
{this.state.shares.map((share) => {
const card = this.props.cards.find(card => 
card.id === share.card_id);
return (
<tr key={share.id}>
<td>{card ? card.name : share.card_id 
</td>
<td>{card.recipient}</td>
</tbody></table>
);}
{this.state.open && <another_component cardname={want to pass card.name here}/>}

卡片和共享是一个对象数组，如下所示， 0： {名称： "名称"， 描述： "} 1： {名称： "名称1"， 描述： "}

我想要地图方法中的卡变量(在 {this.state.shares.map((share( => { 常量卡(进行全局访问，以便可以将其传递给another_component。有人可以帮我解决这个问题吗？谢谢。

Answer 1

你不能在render里面做。您需要将其移到外面并执行以下操作：

componentDidMount() {
this.state.shares.map((share) => {
this.props.cards.find(card => 
card.id === share.card_id);
let returnedCard = cardVal ? card.name : share.card_id 
this.setState({[card.id]:returnedCard})
}
}

然后，您可以访问从map中保存的所有值，并将其传递到您想要的任何位置

Answer 2

在 componentDidMount 中，您可以获取卡片并添加到状态。

componentDidMount() {
const cards = this.state.shares.map((share) => {
return this.props.cards.find(card =>
card.id === share.card_id);
}
this.setState({ cards });
}