Question

我正在尝试遍历集合并显示带有item.date属性的列表。想法是点击'date'并重定向到/item/${item.date}并显示该对象的所有属性。

我正在循环浏览我的收藏中的密钥，即费用1，费用2等......
创建具有对象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;

我的路线：

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

Answer 1

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

相反，您需要使用每个key来访问相应的属性值，如下所示：

const expenses = this.props.expenses;

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

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

循环访问密钥集

1 个答案: