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

Question

我有一个 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 会打开一个抽屉，它将详细介绍有关所选卡片的更多信息，但是我不确定如何显示已从映射的单个卡片中存在的特定数据将数组放入更多信息抽屉中。

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

Answer 1

如果我理解正确，那么您可以将所选项目（或其 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/https*comquestions66475608-jh73w?file=/src/App.js