在 React JS 中显示来自 Json 的键值对

Posted 2023-02-22

【中文标题】在 React JS 中显示来自 Json 的键值对

【英文标题】：Display key-value pairs from Json in React JS

【发布时间】：2021-09-26 00:00:40

【问题描述】：

我想从我的本地 mongoDB 访问数据，并且我想搜索所有键而不创建状态，其中我必须预先定义数据库中存在哪些类型的键。 现在虽然这个问题已经被不同的人回答过无数次了，但大多数人的数据格式如下（这是一个随机的例子）：

  "object": 
    "name": "Pluralsight",
    "number": 1,
    "address": "India",
    "website": "https://www.pluralsight.com/"
  

或者像这样：

"String":"EternalSunsetOfCloudedMind",
"Rating": 2

在上面的两个例子中我们可以很容易地使用函数：<p>Name: sampleJSON.object.name</p>或<p>String : sampleJSON.string</p>

但是如果数据库看起来像这样呢：

["_id":"60d1b5493b470b3884325872","Title":"CatManBegins" ,"Image":"https://m.media-amazon.com/images/catmanbegins.jpg","Rating":9,
  "_id":"60d1b5d0b25e04287318a072", "Title":"Cabdriver","Image":"https://m.media-amazon.com/images/cabdriver.jpg",
  "_id":"60d314a981ecb624dc6966a2","Title":"Pulpnonfiction" ,"Image":"https://m.media-amazon.com/images/pulpnonfiction.jpg","Review":"AlphaReview":"WOW!","BetaReview":"Okay nice","GamaReview":"Hmm",
  "_id":"60d32406affa146b4b1428a2", "Title":"DoctorNormal","Category":"Marvellous Movies",
  "_id":"60d5cfc6326f1c336d3478e2", "Title":"GameOfKingdoms","BudgetInDollars":100000]

我怎样才能在这种数据库中做同样的事情？

我目前的知识和进步： 到目前为止，我已经能够将数据从 MongoDB 获取到服务器端，在使用以下代码解析 JSON 后，我可以将其发送到客户端：

Server.js

app.get('/run-query',async(req,res)=>
MongoClient.connect('mongodb://localhost:27017',useNewUrlParser: true, useUnifiedTopology: true, function(err,db)
    if(err) throw err;
    var dbo = db.db("MyDatabaseName");
    dbo.collection("MyCollectionName").find().toArray(function(err,result)
        if(err) throw err;
        res.json(result);
        db.close();
    );
);

)

客户端/src/App.js

function App() 
  const [data, setData]= useState(null);
  useEffect(()=>
    fetch('/run-query')
      .then ((res)=>res.json())
      .then (setData)
      .catch(console.error)
  , []);
 
  return (
    <div>
      <h1>All results </h1>
      <div class="box">
        <p>!data ? "loading..." : JSON.stringify(data)</p> 

      </div>
    </div>     
  );

【参考方案1】：

当你想要显示一个数组时，通常你会想要将数组中的每一项映射到一个 React 元素。

要获取 javascript 对象的所有属性名称和值，可以使用 Object.entries() 函数。

把这两个放在一起：

// maps each object in the array to an unordered list of key/value pairs
const dataItemToKeyValues = (item) => 
  const entries = Object.entries(item);
  const listItems = entries.map(([key, value]) => (
    <li>
      key: value
    </li>
  ));
  return <ul>listItems</ul>;
;

return (
  <div>
    !data ? (
      "Loading"
    ) : (
      <ul>
        data.map((item) => (
          <li>dataItemToKeyValues(item)</li>
        ))
      </ul>
    )
  </div>
);

有更多信息的React documentation has a section on lists。

【讨论】：

我已更新我的答案以显示列表中每个对象的所有属性。

嗨斯蒂芬！感谢您的解决方案，它几乎解决了我的问题，但出现了错误。似乎它给出了一个错误，因为它无法破解子文档。这是确切的错误：Uncaught Error: Objects are not valid as a React child( found: object with keys AlphaReview,BetaReview,GamaReview). If you meant to render a collection of childer, use an array instead.

您的某些文档具有以对象为值的属性（在您的示例数据中，它是“审查”属性）。您需要编写额外的代码来检测和处理这种情况，因为正如错误消息所说，React 无法显示任意对象。如果这只是用于原型设计，您可以在所有值上使用JSON.stringify(value)，但如果您想要正确显示，您将不得不编写代码来处理它。

是的，我的目标是获取子文档中的键值对。所以简单的 JSON.strigify 是行不通的。我会研究这部分。如果您可能知道我可以从中学习的任何来源，请告诉我：D 感谢您的帮助！