如何在 React 中显示来自 API 调用的复杂对象属性

Question

所以我一直致力于制作一个 React 食谱应用程序。我已经从这个网站上的https://www.themealdb.com/api.php 获取了这个应用程序的数据。我已经能够通过搜索显示餐点名称，如果我想了解餐点的具体细节，我也可以做到，但在这个 API 中有一个复杂的数据，它显示了所有的成分和测量值。我已经尝试了很长时间，但无法显示这顿饭的尺寸和成分。我附上成分和测量的响应。

如您所见，成分和度量中都有空值。如果我通过数字调用它们，我可以同时显示它们前 - strIngredient1、strIngredient2 等等。我想要做的是我将采取所有的成分和措施，只要有一个空字符串或空字符串，它就不会在特定膳食的详细信息中显示它。我如何使用 React Hooks 做到这一点？

Answer 1

这与 React 没有任何关系。

您可以使用以下方法在 JS 中测试真值（解析为真的东西）：

if (x) { }

空字符串不会进入其中，undefined 或 null 也不会。只需检查每个值，看看是否应该将其添加到 UI 中，这样就可以了。