试图映射到 React答案

【问题标题】：Trying to map on React试图映射到 React
【发布时间】：2020-05-21 11:07:33
【问题描述】：

我添加了营养文件

const Nutrition = () => {




  return(
      <div>
        <p>Label</p>
        <p>Quantity</p>
        <p>Unit</p>
      </div>
  )



}
    



export default Nutrition

我正在尝试在 React 中映射某些东西，但我得到这个错误 map is not function。我正在尝试获取 Api，现在我正在尝试将另一个组件映射到它，但错误仍然存在。有人可以帮助我或给我一个提示

const ApiNutrition = () => {




const [nutritions, setNutritions] = useState([])

useEffect( () => {
  
    
   getNutritions();
}, [])

const getNutritions = async () => {

    const response = await fetch(`https://api.edamam.com/api/nutrition-data?app_id=${API_ID}&app_key=${API_KEY}&ingr=1%20large%20apple`)
    
    const data = await response.json();
    setNutritions(data.totalNutrientsKCal)
    console.log(data.totalNutrientsKCal);
 
}


    return(

        <div>

            <form className="container text-center">
                <input classname="form-control" type="text" placeholder="CALORIES"/>
                <button classname="form-control" type="submit">Submit</button>
            </form>

           {nutritions.map(nutrition => (
              <Nutrition />

           ))}
            
        </div>
    )
}

export default ApiNutrition

【问题讨论】：

data.totalNutrientsKCal 是一个数组吗？我认为它可能实际上不是一个数组，在这种情况下，您将无法 map 覆盖它。
不，它是一个对象

标签： javascript reactjs error-handling fetch

【解决方案1】：

从您的代码中，我可以看到您在两个地方设置了nutritions 的值。一种是在使用useState()定义时，另一种是在API调用后用setNutritions。

你得到的错误是map is not a function，这意味着nutritions的某种类型不是数组。

在使用useState 定义时，您提供[] 作为默认值，因此这意味着错误出在API 上，您从API 获得的响应传递给setNutritions 不是数组。

您可以通过typeof data.totalNutrientsKCal在console.log内调试API响应类型

【讨论】：

但我认为我们仍然可以通过一个对象？
好的，我明白了，非常感谢您的帮助
对于你可以做的对象Object.keys(nutritions).map(key => (<Nutrition />))