如何遍历对象数组？答案

【问题标题】：How to loop over array of objects?如何遍历对象数组？
【发布时间】：2022-11-17 18:29:51
【问题描述】：

我想遍历这个对象数组以在反应组件中呈现它们，为什么映射不起作用？

fruits:[{"value":"Apple","status":"Green"},{"value":"Orange","status":"Yellow"},{"value":"Banana","status “：“绿色的”}]

export interface FruitsStatus { 
  fruits: Record<string, string>;
}
const Fruits: (props: FruitsStatus) => JSX.Element = props => {
return (
{props.fruits.map((fruit, index) => {
              return (
                <tr key={index}>
                  <td>
                    {fruit.value}
                  </td>
                  <td > {fruit.status} </td>
                </tr>
              );
            })}
)
}

【问题讨论】：

“不工作”是什么意思？你有错误或其他什么吗？你期望什么，你看到了什么？

标签： reactjs typescript

【解决方案1】：

我认为这是因为没有包含所有 tr 标签的根标签

简单地用 fragment 包裹它：

return (
   <>
     {props.fruits.map((fruit, index) => {
              return (
                <tr key={index}>
                  <td>
                    {fruit.value}
                  </td>
                  <td > {fruit.status} </td>
                </tr>
              );
            })}
   </>
)

【讨论】：

【解决方案2】：

export interface FruitsStatus { 
  fruits: Record<string, string>[];
}
const Fruits: (props: FruitsStatus) => JSX.Element = props => {
return (
{props.fruits.map((fruit, index) => {
              return (
                <tr key={index}>
                  <td>
                    {fruit.value}
                  </td>
                  <td > {fruit.status} </td>
                </tr>
              );
            })}
)
}

FruitStatus.fruits 必须是一个数组而不是单个记录。

【讨论】：