使用数据库行的唯一ID并将其设置为html id属性是不好的做法吗？

Question

为了简单起见，我在 React 中创建了一个从数据库中提取的项目列表。其中一部分是我们可以删除/添加项目到列表中，我也想在数据库中反映这一点。

在创建项目时，我为其生成一个唯一的 id 并将其存储在数据库中，然后当呈现列表时，我将其生成的唯一 id 设置为 div 中的 id 属性。因此，当用户选择要删除的项目时，我可以引用 id 属性并映射回我的数据库以进行删除。

我还将在访问数据库之前验证唯一 ID 的格式/长度是否正确，以防止 mysql 注入。

例如：

<div>

   <div id='UniqueIdOfItem1'
      Item 1
   </div>

   <div id='UniqueIdOfItem2'
      Item 2
   </div>

   <div id='UniqueIdOfItem3'
      Item 3
   </div>

</div

这是一种不好的做法吗？还有安全风险？如果是这样，还有什么其他选择可以选择？

Answer 1

不，这不是一个坏习惯，相反，这是一个好习惯，因为 React 需要

.map

ped 数组具有唯一标识符。

但是，您建议的方式并不是真正的reacty方式。

在 React 中，不建议直接引用 HTML 属性，但我们可以

handle

事情有点不同。在 React 中，我们可以将此唯一标识符作为映射数组上的

key

传递，并向元素添加

handler

。

对于您的示例，这可能类似于：

const MyReactComponent = () => {
  const [myData, setMyData] = useState()

  const handleItemSelect = useCallback((item) => {
    console.log("selected ", item)
  }, [])

  useEffect(() => {
    fetch(HTTP://my.api)
    .then(data => {
      setMyData(data)
    })
    .catch(console.warn)
  }, [])

  return (
   <div>
    {myData.map((item, index) => (
      <div key={item.id} onClick={event => handleItemSelect(item)}>
        item {index}
      </div>
    ))}
   </div>
  )
}