在React js中使用来自mongodb的._id作为关键表单组件

ca1c2owp 于 2023-03-01 发布在 Go

关注(0)|答案(1)|浏览(109)

mongodb中的每个条目都有一个唯一的id，我在组件中的Key属性中使用这个id来解决这个错误：
警告：列表中的每个子元素都应该有唯一的"键"属性。
假设我们有一个输入字段，您可以在其中输入要添加到数据库中的文本，还有一个显示数据库的表，当您向数据库中添加内容时，您可以看到添加的项目。

const handleSubmit = (e) => {
    e.preventDefault();
    const code = e.target.elements['code'].value;

      addToDB(code);
      setDataFromDB([...dataFromDB, { code}]);
    
  };

这里我更新datafromDB的状态来查看变化。问题是因为我们在这一步没有给新输入分配任何id，所以它没有任何导致这个错误的id：警告：列表中的每个子元素都应该有唯一的"键"属性。

{dataFromDB &&
          dataFromDB.map((el) => {
            return <CodeComponent key={el._id} el={el} />;
          })}

实际上，它应该进入数据库，然后mongodb给它分配一个新的唯一id。这就是为什么在初始渲染数据库中预存的项目时，我没有这个问题。
我该怎么办？

mongodb

来源：https://stackoverflow.com/questions/75572484/using-id-from-mongodb-as-key-form-components-in-react-js

1条答案

按热度按时间

zbdgwd5y1#

我猜，您使用的是insertOne，它将始终返回如下数据

{
   "acknowledged" : true,
   "insertedId" : ObjectId("uniqueId")
}

为此，您需要更新代码。
例如：

const handleSubmit = (e) => {
    e.preventDefault();
    const code = e.target.elements['code'].value;

    // Add to the database
    const dbResponse = addToDB(code);

    // Get the unique id from the database response
    const _id = dbResponse.insertedId;

    // Update the state of the datafromDB
    setDataFromDB([...dataFromDB, { code, _id }]);
};

{dataFromDB &&
    dataFromDB.map((el) => {
        return <CodeComponent key={el.id} el={el} />;
    })
 }

赞(0）回复(0）举报 2023-03-01

我来回答

在React js中使用来自mongodb的._id作为关键表单组件

1条答案

相关问题

热门标签

最新问答