React + Axios-加载的数据能够控制台日志，但不能显示在DOM中？

Question

我的简单React App有问题。我可以使用Axios连接到API，并可以控制台日志。但是，我无法在DOM中输出数据。它为什么是空的？

SELECT
   bt.ColumnOne
  ,bt.ColumnTwo
  ,dt1.ColumnThree
  ,dt2.ColumnFour
FROM
  database1.dbo.BaseTable as bt
  JOIN
  database2.dbo.DetailTableOne as dt1
    ON dt1.ID = bt.ID
  JOIN
  database3.dbo.DetailTableTwo as dt2
    ON dt2.ColumnWhatever = dt1.ColumnWhatever
WHERE
  dt.YetAnotherColumn = @SomeValue;

Answer 1

您没有从map返回任何信息

应该是

fragrances.map((fragrance, index) => { 
    return Boolean(fragrance.Name) && <h2 key={index}>{fragrance.Name}</h2>  
})

如注释中所述，返回组件列表时需要使用键。我在这里使用index，但这是一个坏习惯（阅读https://reactjs.org/docs/lists-and-keys.html#keys ）。希望您的fragrance对象具有唯一的id，这是您应该使用的。