javascript - 试图映射到React

Question

我添加了营养文件

const Nutrition = () => {




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



}
    



export default Nutrition

我正在尝试在React中映射某些内容，但我得到的错误映射不起作用。我正在尝试获取一个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

Answer 1

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

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

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

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