Javascript 在React错误中对表进行排序

我有一个应用程序，根据用户输入加载特定项目的大小和库存量。现在，我有两个表为每个产品加载，一个用于缺货项目及其大小，另一个用于库存项目及其大小。我希望能够根据每个尺寸的数量对库存表进行升序/降序排序

下面这张图片显示了我现在的输出。两个表，其中一个应具有排序功能

我的方法是创建一个InStockTable组件，在该组件中发生排序逻辑。我用这个密码笔作为参考。这个和我的不同之处在于，我将表数据作为道具传递给组件，而不是在组件状态下对其进行硬编码

这是处理每个产品的组件的代码：

class Product extends React.Component {
    constructor(props) {
        super(props);
    }

    renderRow(row) { // this function is for the rows of the out of stock table. These need not to be sorted.
        return (
            <tr key="row.size_id">
               <td>{row.quantity}</td>
               <td>{row.size_text}</td>
            </tr>
        );
     }

     renderSortableRow(row) { // this is for the rows that need to be sorted
        var row = {
            "quantity": row.quantity,
            "size": row.size_text
        }

        return row;
     }

     renderProductDetails(product) {
        const inStockProdStr = [];
        const outStockProdStr = [];

        if (product.length) { // product is an array
            product.forEach(p => {
                if (p.quantity == 0) {
                    outStockProdStr.push(this.renderRow(p))
                }
                else {
                    inStockProdStr.push(this.renderSortableRow(p))
                }
            });
        }
        else { // product is an object
            if (typeof product == 'object') {
                Object.keys(product).forEach(id => {
                    if (product[id].quantity == '0') {
                        outStockProdStr.push(this.renderRow(product[id]))
                    }
                    else {
                   inStockProdStr.push(this.renderSortableRow(product[id]))
                    }
                }
                );
            }
        }

        return (
            <div className={'product-tables'}>
                <InStockTable stockArr={inStockProdStr} />
                <div className={'out-stock'}>
                    <h5>Out Of stock</h5>
                    <table className={'table'}>
                        <thead className="thead-dark">
                            <tr>
                                <th scope="col">Qty</th>
                                <th scope="col">Size</th>
                            </tr>
                        </thead>
                        <tbody>
                            {outStockProdStr.map(p => p)}
                        </tbody>
                   </table>
                </div>
            </div >
        );
    }

render() {
    return (
        <div id="product-container">
            <div id="product-info">
                <h2>{this.props.productId}</h2>
                <div id="product-line-detail">
                    {
                        this.renderProductDetails(this.props.prodStock)
                    }
                </div>
            </div>
        </div>
    );
}

类产品扩展了React.Component{
建造师（道具）{
超级（道具）；
}
renderRow（row）{//此函数用于缺货表的行。这些行不需要排序。
返回(
{row.quantity}
{row.size_text}
);
}
renderSortableRow（row）{//这是用于需要排序的行
变量行={
“数量”：行。数量，
“大小”：row.size\u文本
}
返回行；
}
renderProductDetails（产品）{
常量inStockProdStr=[]；
const outStockProdStr=[]；
如果（product.length）{//product是一个数组
product.forEach（p=>{
如果（p.quantity==0）{
outStockProdStr.push（此渲染箭头（p））
}
否则{
inStockProdStr.push（此.renderSortableRow（p））
}
});
}
否则{//product是一个对象
如果（产品类型==‘对象’）{
Object.keys（product.forEach）（id=>{
如果（产品[id]。数量='0'）{
outStockProdStr.push（this.renderRow（产品[id]））
}
否则{
inStockProdStr.push（this.renderSortableRow（产品[id]））
}
}
);
}
}
返回(
缺货
数量
大小
{outStockProdStr.map（p=>p）}
);
}
render（）{
返回(
{this.props.productId}
{
this.renderProductDetails（this.props.prodStock）
}
);
}

}

这是库存表组件的代码：

class InStockTable extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <div className={'in-stock'}>
            <h5>In stock</h5>
            <table className={'table'}>
                <thead className="thead-dark">
                    <tr>
                        <th scope="col">Qty</th>
                        <th scope="col">Size</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.props.stockArr.map((s) => (
                            <tr key={s.simple_id}>
                                <td>{s.quantity}</td>
                                <td>{s.size_text}</td>
                            </tr>
                        ))
                    }
                </tbody>
            </table>
        </div>
    );
}

类InStockTable扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
有现货的
数量
大小
{
此.props.stockArr.map（（s）=>(
{s.quantity}
{s.size_text}
))
}
);
}

}

如果所有这些都有效，我应该能够在inStock表组件中创建一个排序函数。但是，我得到了以下错误：

Error: Objects are not valid as a React child (found: object with keys {quantity, size}). If you meant to render a collection of children, use an array instead.
    in tbody (created by Product)
    in table (created by Product)
    in div (created by Product)
    in div (created by Product)
    in div (created by Product)
    in div (created by Product)
    in div (created by Product)
    in Product (created by ProductList)
    in ProductList (created by RequestForm)
    in div (created by RequestForm)
    in div (created by RequestForm)
    in RequestForm
react-dom.development.js:59:15
The above error occurred in the <tbody> component:
    in tbody (created by Product)
    in table (created by Product)
    in div (created by Product)
    in div (created by Product)
    in div (created by Product)
    in div (created by Product)
    in div (created by Product)
    in Product (created by ProductList)
    in ProductList (created by RequestForm)
    in div (created by RequestForm)
    in div (created by RequestForm)
    in RequestForm

错误：对象作为React子对象无效（找到：具有键{quantity，size}的对象）。如果要呈现子对象集合，请改用数组。
在tbody中（由产品创建）
表中（按产品创建）
在div中（按产品创建）
在div中（按产品创建）
在div中（按产品创建）
在div中（按产品创建）
在div中（按产品创建）
在产品中（由ProductList创建）
在ProductList中（由RequestForm创建）
在div中（由RequestForm创建）
在div中（由RequestForm创建）
以请求的形式
react dom.development.js:59:15
组件中发生了上述错误：
在tbody中（由产品创建）
表中（按产品创建）
在div中（按产品创建）
在div中（按产品创建）
在div中（按产品创建）
在div中（按产品创建）
在div中（按产品创建）
在产品中（由ProductList创建）
在ProductList中（由RequestForm创建）
在div中（由RequestForm创建）
在div中（由RequestForm创建）
以请求的形式

---

有什么想法吗？这是正确的排序方式吗？

该错误仅表示您正在尝试渲染对象，因为

{inStockProdStr.map（p=>p）}

中的

p

是

{
  "quantity": row.quantity,
  "size": row.size_text
}

将其更改为类似于下面所做的操作（将

{

更改为

（

以便map函数实际返回元素）：

{inStockProdStr.map（（p）=>(
{p.quantity}
{p.size}
))}

这是一个愚蠢的错误。我试图在OutStockArray区域显示我的InStockArr对象。代码现在按预期运行，我已修复顶部以反映。

错误肯定在这一部分。当我尝试您的解决方案时，我的编辑器告诉我分号没有出现。尝试使用分号和不使用分号，我仍然得到same错误消息。对，分号不应该在那里。请尝试我的更新代码。需要将

}

放在

之后。

否则分号仍将由br自动插入

{inStockProdStr.map((p) => (
  <tr>
    <td>{p.quantity}</td>
    <td>{p.size}</td>
  </tr>
))}