迭代 JSX 中的 object 属性

Question

React/JSX 新手，请多多包涵。 我有一个 API 返回一个 object 如下

var currObj = {
  SKU : 'Test_SKU_120934',
  category : 'Home',
  inventory_status : 1.
}

我想遍历这个 object 并返回一个 html 未编号列表，如下所示

<ul>
  <li> <strong>SKU</strong> : 'Test_SKU_120934'</li>
  <li> <strong>category</strong>: 'Home' </li>
  <li> <strong>inventory_status</strong> : 1 </li> 
</ul>
```
I can accomplish this in normal Javascript using 'for...in' loop. However, that loop doesn't return anything. How do I write statement below?
```
render () {
    return (

    );
}
```

Answer 1

当您在评论中得到答案时，您必须使用 map 它将返回将在 jsx 中呈现的子数组。

这是代码片段。

 /* other react component body. . . */ // targeted object var currObj = { SKU: 'Test_SKU_120934', category: 'Home', inventory_status: 1. } const objectList = Object.keys(currObj).map(k => ( <li key={k} ><strong>{k}</strong>: {currObj[k]}</li> )); return ( <ul>{objectList}</ul> ); // here objectList is returned by the map function. and Object.keys function creates iterable array of keys from object.

Answer 2

这是你需要的。 链接到工作解决方案。

import "./styles.css";

export default function App() {
  var currObj = {
    SKU: "Test_SKU_120934",
    category: "Home",
    inventory_status: 1
  };

  const objectArr = Object.keys(currObj).map((k, idx) => (
    <li key={idx}>
      <strong>{k}</strong>: {currObj[k]}
    </li>
  ));

  return (
    <div className="App">
      <ul>{objectArr}</ul>
    </div>
  );
}

Answer 3

Object.条目

return (
  <ul>
   {Object.entries(yourProp).map(([key,val]) => (
     <li key={key}><strong>{key}</strong>: '{val}'</li>
   ))}
  </ul>
)