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

【问题标题】：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中返回数据的方式？

【问题讨论】：

标签： reactjs express mongoose mongoose-schema

【解决方案1】：

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

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

是的，您可以简单地检查

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

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

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

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

【讨论】：