Question

在我的 mongoDB 中，我有嵌套对象的文档，这些对象对应于它们适合的摩托车的品牌、型号和年份。示例：

fits: {
   honda: {
       crf250: {
           1990: true,
           1991: true
       },
       rx400: {
           2000: true
       }
   },
   kawasaki: {
       ninja: {
           2015: true
       }
   }
}

我需要遍历文档存储在 fits 字段中的所有品牌（在上面的示例中将是本田和川崎），然后返回特定品牌下存在的所有模型。我在我的聚合方法中成功接收到 make 下所有模型的数组。

return(
        <ul style={{listStyleType: 'none'}}>
            {Object.keys(props.data.fits).map((make, i) => {
                if(db !== null && client !== null){
                    var query = `fits.${make}`;
                    var pipeline = [
                        {
                            $match: {
                                [query]: { 
                                    '$exists': true,
                                    '$ne': {} 
                                }
                            },
                        },
                        {
                            $group: {
                                _id: `$${query}`,
                            }
                        }
                    ]
                    client.auth.loginWithCredential(new AnonymousCredential()).then((user) => {
                        db.collection('products').aggregate(pipeline).toArray().then((models)=>{
                            return <Make 
                                style={{border: '1px solid grey'}}
                                mongoClient={props.mongoClient}
                                id={props.data._id} 
                                key={i} 
                                make={make} 
                                data={props.data}
                                _handleDeleteMake={handleDeleteMake}
                                _updateRowData={props._updateRowData}
                                _models={models}
                            >
                            </Make>
                        }).catch(e=>console.log(e))
                    })
                    
                }
            })}
        </ul>
    )

但是在通话之后我需要呈现品牌。它应该是这样的：

在橙色加号旁边，我想显示特定品牌下存在的所有其他模型的列表，因此如果模型已经存在，我不必再次重复编写模型，我只需单击它即可。

但是在异步中渲染 Make 我留下空白：

现在据我所知，渲染在异步函数完成之前完成，这就是为什么它只是渲染空列表，但我真的不知道我应该如何解决这个问题。有什么建议吗？

Answer 1

我认为您不可能以这种异步方式呈现 React 元素。当 React 尝试渲染 ul 标签内的元素时，因为您使用的是异步，在 DOM 绘制时，React 没有任何东西可以渲染。因此 React 渲染为空白。

异步解决后，React 不会重新渲染，因为 React 不知道添加了新元素。因此，即使您确实拥有该元素，因为 React不会重新渲染，您将不会在应用中看到该元素

为什么会这样？因为 React 只有在有某些“信号”告诉 React 重新渲染时才会重新渲染。例如状态更改、道具更改、钩子调用等。您所做的不属于这些类别中的任何一个，因此 React 不会重新渲染。这与为什么不直接更改组件状态而必须使用 setState 之类的方法来更改它的原因相同。

如何在 React 的异步函数中渲染组件

1 个答案: