Reactjs 循环遍历密钥集合

我正在尝试循环遍历集合并显示一个具有item.date属性的列表。其思想是单击该“日期”并重定向到/item/${item.date}，并显示该对象的所有属性

我正在循环浏览我收藏中的钥匙，这是expense1，expense2等等

创建名为object prop-date的可点击链接

它不显示任何列表/链接。我想我的.map函数中缺少了一些东西，因为我知道我可以访问组件中的所有费用

这是我的密码：

class ExpenseList extends Component {
  render () {
    return (
      <div>
        ExpenseList:
        <button onClick={this.props.loadSamples}>Load Sample Expenses</button>
        {Object
          .keys(this.props.expenses)
          .map(key =>
            <Link to={`/expense/${key.date}`} key={key} index={key}>
              {key.date}
            </Link>
          )
        }
      </div>
    )
  }
}
export default ExpenseList;

class ExpensList扩展了组件{
渲染（）{
返回(
费用清单：
加载样本费用
{对象
.keys（此.道具.费用）
.map（键=>
{key.date}
)
}
)
}
}
导出默认ExpenseList；

我的路线：

const Routes = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={App} />
        <Route path="/create" exact component={AddExpense} />
        <Route path="/expense/:expenseId" component={ExpenseDetails} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  )
}

const Routes=（）=>{
返回(
)
}

Object.keys函数将返回Object参数中定义的每个键，顾名思义。但是您的代码将每个键视为对应的属性值

相反，您需要使用每个

键来访问相应的属性值，如下所示：

const expenses = this.props.expenses;

{Object
  .keys(expenses)
  .map(key =>
    <Link to={`/expense/${expenses[key].date}`} key={key} index={key}>
      {expenses[key].date}
    </Link>
  )
}

const expenses=this.props.expenses；
{对象
.钥匙（费用）
.map（键=>
{费用[key].date}
)
}

我将
this.props.expenses
分配给了另一个变量，因为
数组.map
函数中的
this
将引用回调函数本身，而不是组件。
对象.keys

函数将返回在对象参数上定义的每个键，顾名思义。但是您的代码将每个键视为对应的属性值

相反，您需要使用每个

键来访问相应的属性值，如下所示：

const expenses = this.props.expenses;

{Object
  .keys(expenses)
  .map(key =>
    <Link to={`/expense/${expenses[key].date}`} key={key} index={key}>
      {expenses[key].date}
    </Link>
  )
}

const expenses=this.props.expenses；
{对象
.钥匙（费用）
.map（键=>
{费用[key].date}
)
}

我将
this.props.expenses
分配给了另一个变量，因为
数组.map
函数中的
this
将引用回调函数本身，而不是组件。
这里的
对象是什么？@sashankaryal内置
对象
对象？！什么是
对象
这里？@sashankaryal内置
对象
对象？！谢谢，它很管用！现在我看到了这个列表，当我点击链接时，我被重定向到/expense/some-date-1。这能通过道具吗？如何访问组件中的道具？我已经用我的Routes组件更新了帖子，我正试图通过
详细信息={expenses[key]}
传递帖子，我不熟悉
浏览器路由器
，所以我不确定。不过，从路线的外观来看，您需要费用ID。您是否使用日期作为ID？费用日期在您的应用程序中是否始终是唯一的？嗯，稍后我可能会包括id属性。我只需要在组件中显示特定的扩展数据。希望像
props.decription
，
props.amount
等一样访问它。谢谢，它工作了！现在我看到了这个列表，当我点击链接时，我被重定向到/expense/some-date-1。这能通过道具吗？如何访问组件中的道具？我已经用我的Routes组件更新了帖子，我正试图通过
详细信息={expenses[key]}
传递帖子，我不熟悉
浏览器路由器
，所以我不确定。不过，从路线的外观来看，您需要费用ID。您是否使用日期作为ID？费用日期在您的应用程序中是否始终是唯一的？嗯，稍后我可能会包括id属性。我只需要在组件中显示特定的扩展数据。希望访问它，如中的
props.decription
，
props.amount
等