我的函数没有呈现我提供的数据。我该怎么办？

huangapple
go评论97阅读模式
英文:

My function does not render the data I supply to it. What do I do?

问题

  1. const renderItem = (item) => {
  2.   return (
  3.     <div>
  4.       {Object.entries(item).map(([key, value]) => {
  5.         console.log(value); // 控制台打印值
  6.         return (
  7.           // 你尝试过的几种输出方式
  8.           // <td key={key}>{value}</td> // 使用 <tr></tr> 替代 <div> 包装
  9.           // <td>{value}</td>
  10.           // <p>Test</p> // 包装在 <div> 元素内
  11.         );
  12.       })}
  13.     </div>
  14.   );
  15. };

在你的代码中，renderItem 函数遍历对象的属性并尝试输出相应的 HTML 元素，但它返回的内容没有被正确地放入输出中。你应该在 map 函数的回调中使用 return 来返回 JSX 元素，确保它们被正确输出到页面上。你可以根据需要选择其中一种输出方式，并根据你的需求进行修改。如果仍然有问题，请检查你的 React 组件的结构和数据传递，确保一切正常。

英文:

I am trying to write a table that should be writing out properties of an object in React. For some unknown reason I cannot get it to produce any output.

  3. const renderItem = (item) =&gt; {
  4.   return (
  5. &lt;div&gt;
  7.   {Object.entries(item).map(([key, value]) =&gt; 
  8.           {console.log(value)}
  9.     (
  10.  *variations in next segment    
  11.  )
  12. &lt;/div&gt;

*in this line I tried:

  1. <td key={key}>{value}</td> // with <tr></tr> instead of wrapping <div> elements as shown above
  2. <td>{value}</td>
  3. <p> Test </p> // wrapped in <div> elements

The console.log(value) returns all the values it should so I know I supply the data correctly and it is iterating through the array as it should but somehow I cannot get it to produce any output inside of ().

I tried playing with many different variations, thought the problem might be in css but that is also not the case. I tried outputing data also simply in <div> or <p>, I tried moving the function to a whole new file, but nothing.

EDIT. Here is more info:

My main App.js:

  1. import &#39;./App.css&#39;;
  2. import HierarchyTable from &#39;./components/HierarchyTable.js&#39;;
  3. import exampleData from &#39;./data/example.json&#39;;
  5. function App() {
  7.   return (
  8.     &lt;div className=&quot;App&quot;&gt;
  9.       &lt;HierarchyTable datafed={exampleData} &gt;&lt;/HierarchyTable&gt;
  10.     &lt;/div&gt;
  11.   );
  12. }
  14. export default App;

My HierarchyTable.js

  1. import React, { useState } from &#39;react&#39;;
  2. import &#39;../App.css&#39;; 
  4. export default function HierarchyTable({datafed}) {
  5.   const [data, setData] = useState(datafed)
  7.   const renderTable = (item) =&gt; {
  8.     return(
  9.     Object.entries(item).map(([key, value]) =&gt; {
  10.      
  11.         if (key !== &quot;children&quot;){
  12.           renderItem(value)
  13.         }
  14.         else {
  15.           renderTable(value)
  16.         }
  17.       }
  18.     )
  19.    )
  20.   };
  22.   function renderItem (item) {
  23.   return Object.entries(item).map(([key, value]) =&gt; { 
  24.     
  25.       return (&lt;tr&gt;&lt;td key={key}&gt;{value}&lt;/td&gt;&lt;/tr&gt;)
  26.       
  27.     }
  28.     )}
  29.  
  30.   return (
  31.    &lt;div&gt;
  32.    
  33.     &lt;table&gt;
  34.       &lt;thead&gt; 
  35.         &lt;tr&gt;
  36.              {Object.entries(data[0].data).map(([key, value]) =&gt; ( 
  37.               &lt;th 
  38.               // className = &quot;HeaderItem&quot;
  39.               &gt;{key}&lt;/th&gt;
  40.           )
  41.           )}
  42.         &lt;/tr&gt;
  43.         &lt;/thead&gt;
  44.         
  45.        &lt;tbody&gt;
  46.        {data.map((item) =&gt; renderTable(item))}
  47.       &lt;/tbody&gt;
  48.       &lt;tfoot&gt;
  49.    
  50.   &lt;/tfoot&gt;
  51.    &lt;/table&gt;
  52.       &lt;/div&gt;
  53.   );
  54. }

I tried doing it in many different variatons. The renderItem function gets the data I need as I can console.log it but it does not output the html elements as it should. It breaks my spirit.

答案1

得分: 2

你需要在map函数中正确返回值：

  1. const renderItem = (item) => {
  2.   return (
  3.     <div>
  4.       {Object.entries(item).map(([key, value]) => {
  5.         console.log(value)
  6.         return value
  7.         //或者返回 (<p>{value}</p>)
  8.       })}
  9.     </div>
  10.   )
  11. }

你很可能混淆了类似data.map(value => (value))的简写map函数。

如果你使用大括号{}，你需要使用"return"明确返回值。如果你只使用(value)，它等同于{return value}。

英文:

You need to properly return something from the map function:

  1. const renderItem = (item) =&gt; {
  2.   return (
  3. &lt;div&gt;
  4.   {Object.entries(item).map(([key, value]) =&gt; {
  5.         console.log(value)
  6.         return value
  7.         //or return (&lt;p&gt;{value}&lt;/p&gt;)
  8.     })}
  9. &lt;/div&gt;
  10. )

You most likely confused the shorthand map function that looks like data.map(value => (value))

If you use brackets {}, you need to specifically return something with "return". If you use (value) only, it is short from {return value}

huangapple
  • 本文由 发表于 2023年2月13日 23:48:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/75438168.html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定