[英]Rendering specific values on React.js Modal
I am trying to render some array/object values in a Modal with React.我正在尝试使用 React 在模态中呈现一些数组/对象值。 The problem is when I trigger the modal, values from all modals are rendered.
问题是当我触发模态时,所有模态的值都会被渲染。
I searched and learned that it's because I need to store the value ID in state and then tell react to trigger that specific ID not all.我搜索并了解到这是因为我需要将值 ID 存储在 state 中,然后告诉 react 触发该特定 ID not all。 But I don't know how to apply it.
但我不知道如何应用它。
Here's a basic example:这是一个基本示例:
const items = [{id: 1, name: 'John', friends: ['Michael', 'Tom']},{id: 2, name:
'Robert', friends: ['Jim', 'Max']}]
const [show, setShow] = useState(false);
<>
{items.map((i) => {
<div key={i.id}>
<h1>{i.name}</h1>
<button onClick={() => setShow(true)}>View Friends</button>
</div>;
})}
{show ? <div>{items.map((i) => i.friends)}</div> : null} **I know this is wrong**
</>
So I was wondering how can I store the ID to let React know that I want that specific item to render and not all.所以我想知道如何存储 ID 以让 React 知道我想要呈现特定项目而不是全部。
Save id
in state保存
id
在state
const [show, setShow] = useState(null);
...
<button onClick={() => setShow(i.id)}>View Friends</button>
...
{show !== null && <div>{ items.find(i => i.id === show).friends }</div>}
You have to save the selection id in the component state.您必须将选择 ID 保存在组件 state 中。
const items = [{id: 1, name: 'John', friends: ['Michael', 'Tom']},{id: 2, name:
'Robert', friends: ['Jim', 'Max']}]
const [show, setShow] = useState(false);
const [id, setId] = useState(null);
<>
{items.map((i) => {
<div key={i.id}>
<h1>{i.name}</h1>
// set the user's selection into another local state
<button onClick={() => { setShow(true); setId(i.id)}}>View Friends</button>
</div>;
})}
// filter the current records for the selected id
{show && <div>{items.filter(obj => obj.id === id)?[0].friends}</div>}
</>
First store the selected record in state like先将选中的记录存入state like
const [selectedRecord,setSelectedRecord] = useState(null);
now when you click on button update selected record like this现在,当您单击按钮时,会像这样更新选定的记录
<button onClick={() => { setShow(true); setSelectedRecord(i)}}>View Friends</button>
and use it to render inside modal like this并用它来像这样在模态内部渲染
{show ? <div>name :{selectedRecord.name} Friends :{ selected.friends.join(',')}</div> : null}
Finally your code should be like this最后你的代码应该是这样的
const items = [{id: 1, name: 'John', friends: ['Michael', 'Tom']},{id: 2, name:
'Robert', friends: ['Jim', 'Max']}]
const [show, setShow] = useState(false);
const [selectedRecord,setSelectedRecord] = useState(null);
<>
{
items.map((i) => {
<div key={i.id}>
<h1>{i.name}</h1>
// set the user's selection into another local state
<button onClick={() => { setShow(true); setSelectedRecord(i)}}>View Friends</button>
</div>;
})}
{show ? <div>name :{selectedRecord.name} Friends :{ selected.friends.join(',')}</div> : null}
</>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.