React / Redux: Нужна помощь в отображении ответа API

Question

React / Redux: Нужна помощь в отображении ответа API

2

Я работаю над рецептом приложения. Я использую Yummly API. Я получаю ответ, но я смущен тем, как отображать данные, возвращаемые из API, потому что ответ представляет собой объект с массивом рецептов. Когда я пытаюсь отобразить массив, я получаю эту ошибку:

Неисправность (в обещании) Ошибка: объекты недействительны в качестве дочернего элемента React (найдены: объект с ключами {imageUrlsBySize, sourceDisplayName, ингредиенты, id, smallImageUrls, recipeName, totalTimeInSeconds, атрибуты, вкусы, рейтинг}). Если вы хотите отобразить коллекцию детей, используйте вместо этого массив.

Ссылка на образ того, как выглядит ответ API:

Объект из API "Матчи" - это часть, которую я хочу отобразить в моем компоненте

Action.js

import Axios from 'axios';
import {LOOK_UP_RECIPE'enter code here'} from './types';

 const API_ID = '########';
 const API_KEY = '######';
 const ROOT_LOOK_UP_URL = 'http://api.yummly.com/v1/api/recipes? 
 _app_id=${API_ID}&_app_key=${API_KEY}'


export function lookuprecipesYummly(ingredients) {
 const yummlyurl ='${ROOT_LOOK_UP_URL}&q=${ingredients}'; 
 const request = Axios.get(yummlyurl);

return {
    type: LOOK_UP_RECIPE,
    payload: request
};
}

Reducer.js

import { LOOK_UP_RECIPE } from '../actions/types'
export default function(state = [], action) {
 console.log(action)
 switch (action.type){
    case LOOK_UP_RECIPE:
        return [ action.payload.data, ...state ];
 default:
    return state;
 }
}

Компонент:

    import _ from "lodash";
    import React, {Component} from 'react';
    import { connect } from 'react-redux';

class RecipeList extends Component {

 renderRecipe(recipeData) {
    return (
        <tr key={0}>
            <td key={1}>{recipeData.matches}</td>
        </tr>
    )
}

render() {

    return(
        <table>
            <thead>
                <tr key={1}>
                    <th>Recipe</th>
                </tr>
            </thead>
            <tbody>
                {this.props.recipes.map(this.renderRecipe)}
            </tbody>
        </table>
    )
}
}


function mapStateToProps({recipes}) {
   return {
       recipes
      }
};


export default connect(mapStateToProps)(RecipeList);

Josue Guzman 27 март 2018, в 23:22

Источник

0

Вам нужно сделать несколько JSX. Прямо сейчас вы просто возвращаете массив объектов. Реакт не знает, что с этим делать. Можете ли вы опубликовать то, что находится внутри одного из объектов recipeData.matches ?
Chase DeAnda 27 март 2018, в 20:39
0

Чтобы просто выложить данные в виде строки, вы можете выполнить <td>{JSON.stringify(recipeData.matches)}</td> .
Chase DeAnda 27 март 2018, в 20:40
0

Кроме того, вы можете опубликовать то, что находится внутри this.props.recipes ? Я думаю, что ваш .map может быть не так.
Chase DeAnda 27 март 2018, в 20:42
0

Привет Чейз DeAnda, я изменил td на -> <td> {JSON.stringify (recipeData.matches)} и получил длинную строку того, что в массиве Matches. Так что это та информация, которую я должен предоставить
Josue Guzman 27 март 2018, в 21:09
0

Да, ваша карта должна быть на этом уровне. Можете ли вы опубликовать, как выглядят данные для this.props.recipes ?
Chase DeAnda 27 март 2018, в 21:10
0

Я добавил изображение данных в рецептах в конце поста выше
Josue Guzman 27 март 2018, в 21:13

Показать ещё 4 комментария

Теги:

reactjs

node.js

redux

1 ответ

Ещё вопросы

Вам нужно сделать несколько JSX. Прямо сейчас вы просто возвращаете массив объектов. Реакт не знает, что с этим делать. Можете ли вы опубликовать то, что находится внутри одного из объектов recipeData.matches ?
Чтобы просто выложить данные в виде строки, вы можете выполнить <td>{JSON.stringify(recipeData.matches)}</td> .
Кроме того, вы можете опубликовать то, что находится внутри this.props.recipes ? Я думаю, что ваш .map может быть не так.
Привет Чейз DeAnda, я изменил td на -> <td> {JSON.stringify (recipeData.matches)} и получил длинную строку того, что в массиве Matches. Так что это та информация, которую я должен предоставить
Да, ваша карта должна быть на этом уровне. Можете ли вы опубликовать, как выглядят данные для this.props.recipes ?
Я добавил изображение данных в рецептах в конце поста выше

Chase DeAnda · Accepted Answer · 2018-03-27T22-10-00.000Z

Вам нужно использовать данные для каждого рецепта внутри некоторого JSX. Вот пример того, как заполнить строку таблицы:

import _ from "lodash";
import React, {Component} from 'react';
import { connect } from 'react-redux';

class RecipeList extends Component {

    renderRecipe(recipe) {
        return (
            <tr key={recipe.id}>
                <td>{recipe.recipeName}</td>
                <td>{recipe.rating}</td>
                <td>{recipe.attributes.course[0]}</td>
                <td>{recipe.ingredients.join(', ')}</td>
            </tr>
        )
    }

    render() {

        return(
            <table>
                <thead>
                    <tr>
                        <th>Recipe</th>
                        <th>Rating</th>
                        <th>Course</th>
                        <th>Ingredients</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.recipes.matches.map(this.renderRecipe)}
                </tbody>
            </table>
        )
    }
}


function mapStateToProps({recipes}) {
    return { recipes }
};


export default connect(mapStateToProps)(RecipeList);

Спасибо за помощь, действительно ценю это. Но когда я попробовал это, я получаю ошибку: TypeError: Невозможно прочитать свойство 'map' из неопределенного. Я не понимаю почему, я новичок в React
Вам необходимо добавить проверку, чтобы убедиться, что this.props.recipes.matches является первым массивом. Из приведенных вами примеров данных я предположил, что они будут существовать всегда. Вам нужно будет обработать изгибы ваших данных, но вы можете использовать этот подход для визуализации массива объектов.
Большое спасибо!! Получил это на работу