Реакция на обучение: Проблемы с пониманием, почему мой компонент не рендерится / API / KEYS - PullRequest
Новая
       5

Реакция на обучение: Проблемы с пониманием, почему мой компонент не рендерится / API / KEYS

0 голосов
/ 16 февраля 2020

Я довольно новичок в изучении React и мне нужна помощь. Я хочу создать приложение поиска еды с использованием MealDb API , моя проблема в том, что оно не будет отображаться.

Вот мой код в компоненте моего приложения: 

 import React, { useState } from 'react';
 import './App.css';
 import Search from './components/Search';
 import Meals from './components/Meals';
 import axios from 'axios';

 function App() {
 const [meals, setMeals] = useState({});

 const searchMeals = async meals => {
 const res = await axios.get(
  `https://www.themealdb.com/api/json/v1/1/search.php?s=${meals}`
  );
 console.log(res.data);
 setMeals({ meals: res.data });
 };

 return (
 <div className='App'>
  <Search searchMeals={searchMeals}></Search>
  <Meals searchMeals={searchMeals} meals={meals}></Meals>
 </div>
  );
  }

export default App;

Я создал компонент Еда с этим внутри: 

import React from 'react'
import MealsItem from './MealsItem'

const Meals = ({ meals}) => {

 return (


<div >
  {Object.keys(meals).map(meal=>(
    <MealsItem key={meal.idMeal} meal={meal}/>
  ))}
</div>

);

};



 export default Meals

, а затем для части рендеринга я создал компонент MealsItems: 

import React, { Fragment } from 'react';


const MealsItem = ({ meal :{strMealThumb, strMeal,}}) => {
 return (
 <Fragment>
  <div id='result-heading'>
    <h2>Search result for: {strMeal}</h2>
  </div>
  <div className='meal'>
    <img src={strMealThumb} alt={strMeal} />
    <div className='meal-info'>
      <h3>{strMeal}</h3>
    </div>
  </div>
  </Fragment>
 );
};
export default MealsItem;

Когда я что-то ищу: я вижу уникальный предмет, в котором ничего нет. Нет заголовка, нет изображения. В консоли, когда я проверяю приложение, я читаю {еды: Array (8)} и «Предупреждение: у каждого ребенка в списке должна быть уникальная« ключевая »опора». Я думал, что написал уникальный ключ: ключ = {food.idMeal}.

РЕДАКТИРОВАТЬ: Я пытался написать 

{meals.map(meal=>(

))}

безрезультатно, к сожалению. Это дает мне ошибку типа еды. Карта не является функцией.

Это структура API: 

{
  "meals": [
    {
      "idMeal": "52772",
      "strMeal": "Teriyaki Chicken Casserole",
      "strDrinkAlternate": null,
      "strCategory": "Chicken"
}
]
}

Edit # 2: Это то, что я получаю, когда я console.log (питание)

console .log (питание)

Спасибо всем, кто хочет помочь! Хорошего дня!

1 Ответ

0 голосов
/ 16 февраля 2020

Причина в том, что вы используете Object.keys(meals).map. Вместо этого сделайте это 

{meals.map(meal=>(
   <MealsItem key={meal.idMeal} meal={meal}/>
))}

РЕДАКТИРОВАТЬ: Также установите значение по умолчанию состояния еды. 

const [meals, setMeals] = useState([]); // dont use  useState({})

В противном случае при первоначальном рендеринге до получения еды будет ошибка при попытке отобразить над объектом.

...