时间戳

首页 > 解决方案 > 尝试在数组中映射数组并在表格中显示

javascript - 尝试在数组中映射数组并在表格中显示

问题描述

我的数据库中目前有三个表。我有一个用户、医学和医学详细信息表。它们是这样关联的，med 详细信息属于医学，医学属于用户。

我目前正在使用 sequelized 调用我的数据库并获取用户和属于该用户的嵌套表。在反应中，我需要map遍历对象中的 Medicine 数组以取回所有药物名称，然后我想map遍历 med details 数组以获取它们被服用的时间。

                <tbody>
                    { user.Medicines && user.Medicines.length !== 0 && user.Medicines.map(item => {
                        console.log(item)
                    

                        const medDeets = item.MedDeets
                        const medDeetMap = medDeets.map(deet => {
                            const time = deet.timeTaken

                            // setTime(time)
             Issue here>?           }) 
                        return (
                            <tr>
                                <td>{item.medicineName}</td>
                                <td>   </td>
                                <td></td>
                                <td>{item.waitingPeriod} hours</td>
                            </tr>

                        )
                        // }


                    })}
                </tbody>

如果我尝试})从我的第二个map函数中移动（也显示在上面的代码中），我遇到了似乎是范围界定问题，并且无法再看到我的第一个map函数中的数据。如果我尝试setState从第二个map函数开始，我会收到太多的重新渲染错误。

目前是全栈开发程序的新毕业生，这是我第一次在Stackoverflow上，如果我遗漏了一些明显的东西，我很抱歉。感谢帮助/反馈。

标签： javascriptreactjssequelize.js

解决方案

你不能setstate在渲染函数内部，因为它会导致副作用。究竟发生了什么，每次你更新state react 调用render函数时，所以如果你要更新state内部render 函数，那么它将卡在无限循环中

 <tbody>
                    { user.Medicines && user.Medicines.length !== 0 && user.Medicines.map(item => {
                        console.log(item)
                    

                        const medDeets = item.MedDeets
                        const medDeetMap = medDeets.map(deet => {
                            const time = deet.timeTaken
return time ;
                    }) 
                        return (
                            <tr>
                                <td>{medDeetMap .medicineName}</td>
                                <td>   </td>
                                <td></td>
                                <td>{medDeetMap .waitingPeriod} hours</td>
                            </tr>

                        )
                        // }


                    })}
                </tbody>

推荐阅读