即使我在控制台记录值，反应错误也不是功能？答案

【问题标题】：React error not a function even with me console logging the value?即使我在控制台记录值，反应错误也不是功能？
【发布时间】：2021-06-12 05:09:45
【问题描述】：

我是一名初学者，正在从事他的第一个 MERN 项目，我为音乐创建了一个 API，添加了艺术家、专辑……我在后端有 mongo db，我有一个完整的 crud 应用程序和谷歌 firebase 身份验证，问题是我决定使用音频数据库 API 来拥有更大的库并更轻松地实现更多功能，我可以获取 API 和控制台记录结果，但是当我决定映射它时做出反应，我得到了不是一个函数错误或无法映射未定义，对于这两个错误，在编写代码之前我让控制台记录了这两个值并且它是有效的。我也遇到了身份验证问题，导致我无法在页面加载时显示任何信息，这就是我决定使用 API 的原因，这样我就不会错过身份验证功能，我可以现在获取数据，稍后开始推送到 mongo db，但我需要先在屏幕上显示任何数据。任何想法可能有什么问题？？！这只是我的组件的代码 git hub 前端：https://github.com/moeabraham/proj3 git hub 后端：https://github.com/moeabraham/proj3-backend

    function AlbumSlide ()  {

    const [initData, setInitData] = useState({
        results: ['']
      })
      useEffect(()=> {

          async function getInitData(){
              
            const init = await fetch('https://www.theaudiodb.com/api/v1/json/523532/searchalbum.php?s=eminem').then(res => res.json())
    
            setInitData(albums =>({
              ...albums,
              init
            }))
            // console.log(init)
            console.log(initData.init.album)

        
          }
          getInitData()

        
    
      },[])


      

    return  ( 
      <>
      <div className="albumSlide">     
         {initData.init.albums.map((album, idx)=>{
           <p key={idx}>{album.strAlbum}</p>
         })}
</div>

      {/* <section className="albumSlide">
                  <article class="card"  key={idx}> 

      </section> */}
      
      </>
      )
}    


    
export default AlbumSlide;

【问题讨论】：

标签： node.js reactjs mongodb express state

【解决方案1】：

你需要保护对state值的访问，这需要一些时间来设置（ajax是异步的，setter是异步的）

在您返回的jsx 中尝试这样的操作

return  ( 
  <>
    <div className="albumSlide">     
      {initData?.init?.albums && initData.init.albums.map((album, idx) =>
        <p key={idx}>{album.strAlbum}</p>
      )}
    </div>
  </>
)

【讨论】：