如何在反应中遍历对象的属性

Posted 2023-03-11

【中文标题】如何在反应中遍历对象的属性

【英文标题】：How can I traverse properties of an object in react

【发布时间】：2019-10-19 09:14:21

【问题描述】：

我创建了一个接收对象（客户、产品、旅行等）的通用数据表。我有一个 TravelsModel 对象，它有一个属性 mexican_currency_value。这个值用 mongoose 定义为：

var travelSchema = new mongoose.Schema(
        name: String,
        description: String,
        mexican_currency_value: mongoose.Schema.Types.Decimal128
    );

我还有一个函数可以返回一个包含所有存储行程的列表：

function getTravels(req, res) 

    if (req.params.id) 
        TravelModel.findById( String(req.params.id) , (err, value) => 
            if ( err ) 
                return res.status(500).send(
                    message: messageError
                )
            
            return res.status(200).send(
                results: value
            );
        );
     else 
        TravelModel.find((err, value) => 
            if (err) 
                return res.status(500).send(
                    message: messageError
                )
            
            return res.status(200).send(
                results: value
            );
        );
    

这个函数返回几个具有这种结构的行程：

  description: "Primer Viaje"
  mexican_currency_value: $numberDecimal: "18.5"
  name: "Viaje 1"
  __v: 0
  _id: "5cf56b04462a865264fabb9d"

我的数据表或多或少是这样完成的：

            <DataTable plain>
                <TableHeader>
                    <TableRow>
                        tableColumnHeader.map(element => (
                            <TableColumn key=element.id>element.text</TableColumn>
                        ))
                        <TableColumn key="actions">Acciones</TableColumn>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    tableRow.map((element, idx) => (
                        <TableRow key=idx>
                            <TableColumn>tableColumnHeader.map( columns => ( 
                                <div key=element[columns.id]>element[columns.id]</div>
                            ))</TableColumn>
                            <ActionsMenu id=element._id onDelete=onDelete onUpdate=onUpdate />
                        </TableRow>
                    ))
                </TableBody>
                <TableFooter />
            </DataTable>

我收到此错误：

Objects are not valid as a React child (found: object with keys $numberDecimal). If you meant to render a collection of children, use an array instead.

这是因为旅行对象无法访问元素[columns.id]，我必须做元素['mexican_currency_value']['$NumberDecimal']

有没有办法做类似 element[columns.id].value 的事情？或者修改mongoose中返回数据的方式？

【参考方案1】：

我收到此错误： 该错误的原因是您尝试渲染一个对象，而不是渲染字符串或 React 组件。

有没有办法做类似 element[columns.id].value

是的，您可以简单地检查

typeof (element[columns.id]) === 'object' ? ((element[columns.id])).values().map(v => v) : (element[columns.id])

但我认为这不是一个好主意。

或者修改mongoose中返回数据的方式？

为了简单起见，我认为最好的方法是始终为该键生成数字。