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 数组中的数据以显示所有带有相关信息的卡片，这是我的 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>
);
});

看起来是这样的...

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

我解释清楚了吗？感谢任何帮助

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/httpsWhosebugcomquestions66475608-jh73w?file=/src/App.js

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

React/Mobx: How to pass single item from a mapped array into another component and retrieve only the item associated with the value clicked

javascript

reactjs

typescript

react-router

mobx