React/Mobx：如何将映射数组中的单个项目传递到另一个组件中，并仅检索与单击的值关联的项目

如何解决React/Mobx：如何将映射数组中的单个项目传递到另一个组件中，并仅检索与单击的值关联的项目

我有一个 API，它被推送到一个名为 PositionStore 的商店；如图

const PositionStore = observable({
loading: false,error: "",items: [] as PositionInfo[],LoadPosition() {
    this.loading = true;
    this.error = "";

    GetPositions()
    .then(action((json:any) => {
        this.items = json.items;
        console.log(json)
        this.loading = false;
    }))
    .catch(action((error: any) => {
        this.error = error.message;
        this.loading = false;
    }));
}
});

在我的 JobCard 组件中，我正在映射 PositionStore Array 中的数据以显示具有相关信息的所有卡片，这是我的 AllJobCard.tsx

const AllJobCard = observer(() => {
return (
    <Row className={'JobCard_Row'}>
        {PositionStore.items.map((positions,id) => (
            <Card className={'AllJobCard'}>
                <Row className={'Header_Row'}>
                    <CardHeader
                        avatar={
                            <Avatar aria-label="recipe" className={'avatar'}>
                                A
                            </Avatar>
                        }
                        title={positions.position_full_name}
                        subheader={positions.target_fill_date}
                    />
                    <JobDetails />
                </Row>
                <CardContent className="cardContentRow">
                    <Typography variant="body2" color="textSecondary" component="p">
                        <div>
                            {positions.equivalent_nato_rank} - {positions.rank}
                        </div>
                        <div> {positions.organisation_name} </div>
                        <div> {positions.location_name}</div>
                        <div> {positions.cap_badge} </div>
                    </Typography>
                </CardContent>
                <CardActions disableSpacing className={'actions'}>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>
        ))}
    </Row>
);
});

这看起来是这样...

在每张卡片内，我有一个按钮，onClick 会弹出一个抽屉，它会详细说明有关所选卡片的更多信息，但是我不确定如何显示已从卡片映射的单个卡片中存在的特定数据数组放入更多信息抽屉。

我解释清楚了吗？任何帮助表示赞赏

解决方法

如果我理解正确，那么您可以将所选项目（或其 ID）存储在商店内，如下所示：

const store = observable({
  loading: false,error: "",selectedItemId: null,selectedItem: null,items: []
});

映射项目时使用 onClick 处理程序设置此值：

onClick={() => {
  store.selectedItem = item;
  // Or if you prefer store it by id
  store.selectedItemId = item.id;
}}

（最好在实际代码中对其进行操作，我在此示例中将其内联）

然后检查它是否存在并显示它：

    <div>
      {store.selectedItem && (
        <div>
          Selected item info:
          <h4>{store.selectedItem.name}</h4>
          <div>{store.selectedItem.description}</div>
        </div>
      )}
    </div>

如果您按 id 存储它，则在显示之前找到它（或进行计算）：

  const selectedItem = store.items.find(
    (item) => item.id === store.selectedItemId
  );

我在 Codesandbox 上为你做了一个例子：https://codesandbox.io/s/httpsstackoverflowcomquestions66475608-jh73w?file=/src/App.js