Node.js React/Redux：需要帮助呈现API响应吗

我正在开发一个食谱应用程序。我使用的是Yummly API，我得到了一个响应，但是我不知道如何呈现从API返回的数据，因为响应是一个包含一系列配方的对象。当我尝试渲染阵列时，出现以下错误：

未捕获（承诺中）错误：对象作为React子对象无效（找到：具有键{imageUrlsBySize、sourceDisplayName、Components、id、smallImageUrls、recipeName、totalTimeInSeconds、attributes、flavors、rating}的对象）。如果要呈现子对象集合，请改用数组

链接到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);

从“lodash”导入； 从“React”导入React，{Component}； 从'react redux'导入{connect}； 类RecipeList扩展了组件{ renderRecipe（recipeData）{ 返回( {recipeData.matches} ) } render（）{ 返回( 配方 {this.props.recipes.map（this.renderRecipe）} ) } } 函数MapStateTops（{recipes}）{ 返回{ 食谱 } }; 导出默认连接（MapStateTops）（RecipeList）；

---

您需要在一些文件中使用每个配方的数据。以下是如何填充表格行的示例：

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);

从“lodash”导入； 从“React”导入React，{Component}； 从'react redux'导入{connect}； 类RecipeList扩展了组件{ renderRecipe（配方）{ 返回( {recipe.recipeName} {recipe.rating} {recipe.attributes.course[0]} {recipe.components.join（'，'）} ) } render（）{ 返回( 配方 评级 课程 成分 {this.props.recipes.matches.map（this.renderRecipe）} ) } } 函数MapStateTops（{recipes}）{ 返回{recipes} }; 导出默认连接（MapStateTops）（RecipeList）；

---

您需要渲染一些JSX。现在只返回一个对象数组。我不知道该怎么办。您可以发布其中一个

recipeData.matches

对象中的内容吗？要快速将数据作为字符串输出，您可以执行

{JSON.stringify（recipeData.matches）}

。此外，您可以发布

this.props.recipes

中的内容吗？我想你的

.map

可能是错的。嘿，Chase DeAnda，我把td改为-->{JSON.stringify（recipeData.matches）}，并在matches数组中得到了一个很长的字符串。所以我需要渲染的就是这些信息，你的地图应该在那个层次上。你能发布这个.props.recipes的

数据是什么样子的吗？谢谢你的帮助，非常感谢。但是当我尝试这个方法时，我得到了一个错误：TypeError:无法读取未定义的属性“map”我不明白为什么，我是新手。您需要添加一个检查以确保
this.props.recipes.matches
首先是一个数组。从您发布的示例数据中，我假设它始终存在。您必须解决数据的纠结，但是您可以使用这种方法来渲染对象数组。