我有这样的回应:

enter image description here

我想显示此HTML中每个对象的名称:

{subjects.map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">{ item.name }</span>
  </li>
))}   

但它会抛出一个subjects.map is not a function的错误.

首先,我必须定义对象的关键点,它在其中创建一个关键点数组,我想在其中循环并显示subject.names.

我也试过这样做:

{Object.keys(subjects).map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">key: {i} Name: {subjects[i]}</span>
  </li>
))}

推荐答案

当调用Object.keys时,它返回一个对象键array.

Object.keys({ test: '', test2: ''}) // ['test', 'test2']

当你调用Array#map时,你传递的函数会给你2个参数;

  1. 数组中的项,
  2. 项目的索引.

当你想要获得数据时,你需要使用item(或者在下面的例子中是keyName)而不是i

{Object.keys(subjects).map((keyName, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">key: {i} Name: {subjects[keyName]}</span>
    </li>
))}

Reactjs相关问答推荐

react 派生状态未正确更新

Reaction Axios多部分/表单-数据数组不工作

防止在Reaction中卸载

在React Create App TS项目中安装material UI

用于获取带有事件处理程序的API的动态路由

react -无法获取函数的最新参数值

如何在MUI x图表条形图上放置圆角?

强制 useEffect 仅运行一次

标签文本删除了 MUI 概述的输入

从 redux 调用UPDATE_DATA操作时状态变得未定义

React - 函数组件 - 点击两次问题处理

基于 React/NextJS Timer 的文本淡入/淡出不起作用

使用新数据更新时,React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

计数器递增 2 而不是 1

基于标记名的博客详细信息分组没有发生

如何在对话素材ui中设置边框半径?

如何从其他组件访问 useQuery refetch 方法?

gtag:为什么谷歌分析即使没有被授权也会收集数据

为什么我不能使用 formik 更改此嵌套对象中的值

React .NET - 使用 signalR 获取所有活动连接的数量