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

问题描述

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

const PositionStore = observable({加载:假，错误:"，项目:[] 作为 PositionInfo[]，加载位置(){this.loading = true;this.error = "";获取位置().then(action((json:any) => {this.items = json.items;控制台日志(json)this.loading = false;})).catch(action((error: any) => {this.error = error.message;this.loading = false;}));}});

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

const AllJobCard = observer(() => {返回 (<Row className={'JobCard_Row'}>{PositionStore.items.map((positions, id) => (<卡片类名称={'AllJobCard'}><Row className={'Header_Row'}><卡片头头像={<Avatar aria-label="recipe";className={'avatar'}>一种</头像>}标题={positions.position_full_name}子标题={positions.target_fill_date}/><工作详情/></行><CardContent className="cardContentRow"><排版变体=body2"颜色=textSecondary"组件＝p"><div>{positions.equivalent_nato_rank} - {positions.rank}

<div>{positions.organisation_name} </div><div>{positions.location_name}

<div>{positions.cap_badge} </div></排版></卡片内容><CardActions disableSpacing className={'actions'}><IconButton aria-label="添加到收藏夹"><FavoriteIcon/></图标按钮></CardActions></卡片>))}</行>);});

这看起来是这样...

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

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

解决方案

如果我理解正确，那么您可以将所选项目(或其 id)存储在商店内，如下所示:

const store = observable({加载:假，错误:"，selectedItemId:空，所选项目:空，项目: []});

当映射到项目时使用 onClick 处理程序来设置这个值:

onClick={() =>{store.selectedItem = item;//或者，如果您更喜欢按 id 存储它store.selectedItemId = item.id;}}

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

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

 
{store.selectedItem &&(<div>所选商品信息:<h4>{store.selectedItem.name}</h4><div>{store.selectedItem.description}</div>
)}

如果您按 id 存储它，则在显示之前找到它(或进行计算):

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

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

I have a API which is pushed into a store called PositionStore; as shown

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;
    }));
}
});

In my JobCard component, I am mapping the data in the PositionStore Array to display all cards with the relevant information, here is my 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>
);
});

This looks like so...

Inside each card, I have a button which onClick brings up a drawer, which will detail more information about the selected card, However I am unsure how to display the specific data which exists in a single card which has been mapped from the array into the more information drawer.

Have I explained myself well? Any help is appreciated

解决方案

If I understand you correctly then you can just store selected item (or its id) inside store, like that:

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

When mapping over items use onClick handler to set this value:

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

(Better make action for it in real code, I'm inlining it for this example)

Then check that it exists and show it:

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

If you store it by id then find it (or make computed) before showing:

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

I've made an example for you on Codesandbox: https://codesandbox.io/s/httpsstackoverflowcomquestions66475608-jh73w?file=/src/App.js

这篇关于React/Mobx:如何将映射数组中的单个项目传递到另一个组件中，并仅检索与单击的值关联的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！