在 React.js Modal 上呈現特定值

Question

我正在嘗試使用 React 在模態中呈現一些數組/對象值。 問題是當我觸發模態時，所有模態的值都會被渲染。

我搜索並了解到這是因為我需要將值 ID 存儲在 state 中，然后告訴 react 觸發該特定 ID not all。 但我不知道如何應用它。

這是一個基本示例：

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**
</>

所以我想知道如何存儲 ID 以讓 React 知道我想要呈現特定項目而不是全部。

Answer 1

保存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>}

Answer 2

您必須將選擇 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>}
</>

Answer 3

先將選中的記錄存入state like

const [selectedRecord,setSelectedRecord] = useState(null);

現在，當您單擊按鈕時，會像這樣更新選定的記錄

<button onClick={() => { setShow(true); setSelectedRecord(i)}}>View Friends</button>

並用它來像這樣在模態內部渲染

{show ? <div>name :{selectedRecord.name} Friends :{ selected.friends.join(',')}</div> : null}

最后你的代碼應該是這樣的

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}
  </>