typescript 如何在对象数组上循环？[closed]

v1uwarro 于 2022-11-18 发布在 TypeScript

关注(0)|答案(2)|浏览(134)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
3小时前关门。
Improve this question
我想在这个对象数组上循环，在react中的组件中渲染它们，为什么Map不起作用？
水果：[{“值”：“苹果”，“状态”：“绿色”}，{“值”：“橙子“，“状态”：“黄色”}，{“值”：“香蕉”，“状态”：“绿色”}]

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>
              );
            })}
)
}

typescript

来源：https://stackoverflow.com/questions/74473795/how-to-loop-over-array-of-objects

2条答案

按热度按时间

yh2wf1be1#

我认为这是因为没有根标记来包含所有tr标记
只需使用片段将其 Package 起来：

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

赞(0）回复(0）举报 2022-11-18

gudnpqoy2#

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必须是数组而不是单个记录。

赞(0）回复(0）举报 2022-11-18

我来回答

typescript 如何在对象数组上循环？[closed]

2条答案

相关问题

热门标签

最新问答