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

Question

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

我目前正在使用 sequelized 调用我的数据库并获取用户和属于该用户的嵌套表。在 react 中，我需要 map 覆盖对象中的 Medicine 数组以取回所有药物名称，然后我想 map 覆盖 med 详细信息数组以获取服用时间。

                <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 函数中的数据。如果我从第二个map 函数尝试setState，我会收到太多重新渲染错误。

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

Answer 1

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

 <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>