如何讓我的 TableData 反應組件可重復使用 onClick 當它只在我的桌子下發布一個時？

Question

我正在制作一個反應費用跟蹤器。 我有我的應用程序，然后在其中我有一個帶按鈕的表單組件。 然后我有一個 TableData 組件，我將 state 輸入傳遞給 props。 但是，當我將其發送過來時，它不會在桌子下方發布另一個表格行，它只會保持在一個位置。 我想我需要 map 一些東西。 我嘗試映射 state 輸入道具並以這種方式傳遞。 但我沒有達到我想要的。 我也無法在谷歌上找到我需要的東西。 任何提示都會很棒，謝謝。 使用stackOverflow的新的旁注，所以如果我把我的帖子搞砸了，很抱歉

<tr className='tableRow'>
<td>{props.userState.payment}</td>
<td>{props.userState.purchase}</td>
<td>{props.userState.date}</td>
<td>{props.userState.location}</td>
<td>{props.userState.price}</td>
<td><button onClick={onButtonClick}>X</button></td>
</tr>
 Above code is TableData.js

 Below code is in my Form.js
<TableData userState={formValues} 

Answer 1

您需要將 formValues 作為行對象數組，到 map 每個 object 到每一行。因此，當您添加它時，它將被推入數組並顯示在表格中。

在 tableData 中，您應該映射 userState，如下所示：

{props.userState?.map(rowItem => (
  <tr key={rowItem.id} className='tableRow'>  // pass any unique value(id) to key
    <td>{rowItem.payment}</td>
    <td>{rowItem.purchase}</td>
    <td>{rowItem.date}</td>
    <td>{rowItem.location}</td>
    <td>{rowItem.price}</td>
    <td><button onClick={onButtonClick}>X</button></td>
</tr>
))}

關鍵在映射中很重要 - https://betterprogramming.pub/why-react-keys-matter-an-introduction-136b7447cefc