从DRF ListAPIView获取数据后，如何将其转换为对其执行map()方法所需的表单

Question

我正在序列化我的模型Recipe的所有实例。Django API视图如下(忽略随机配方(：

[
{
"id": 31,
"title": "marsh",
"cooktime": "5",
"ingredients": "marshmellowrnonion",
"directions": "make the onionrneat the marshrnenjoy",
"created_date": "08/16/2020 20:56:09",
"published_date": null,
"picture": null,
"author": 3
},
{
"id": 33,
"title": "mac",
"cooktime": "1",
"ingredients": "macrncheese",
"directions": "make cheddarrnadd mac and cheddarrnyes yes",
"created_date": "08/16/2020 20:56:49",
"published_date": null,
"picture": null,
"author": 2
},
{
"id": 34,
"title": "onion",
"cooktime": "20",
"ingredients": "onionrncheddarrnmozz",
"directions": "add onion to the cheddar and mozzrnadd onion some water and eat",
"created_date": "08/16/2020 20:57:06",
"published_date": null,
"picture": null,
"author": 2
},
]

在我对react redux的操作中，我使用axios获取数据。get(url(:

export const getAllRecipes = () => async dispatch => {
const res = await axios.get('http://127.0.0.1:8000/api/recipe/'); 
return(
dispatch({
type: GET_ALL_RECIPES,
payload: res.data
})
)
}

上面函数的有效载荷作为"配方"放入存储中，并使用mapStateToProps 添加到下面组件的道具中

在我的一个组件类中，我试图创建一个函数，通过对API的数据调用map((：来呈现每个配方中的信息

class ListRecipes extends Component {
componentDidMount() {
this.props.getAllRecipes();
}
renderRecipes() {
return this.props.recipes.map((recipe) => {
return (
<div> recipe.(information here) </div>
)
})
}
render() {
return (
<React.Fragment>
{this.renderRecipes()}
</React.Fragment>
);
}
}

然后我得到一个错误，"this.props.recipes.map"不是一个函数。

经过一番谷歌搜索，我意识到这可能是因为从API获取的数据格式不正确。我认为它应该是一个包含配方对象的数组。然而，为了查看我的数据是什么样子，我尝试只渲染JSON.stringfy(配方(。它不是渲染为一个数组，里面有配方对象，而是渲染为另一个列表中的列表，如下所示：

[
[
{
"id":31,
"title":"marsh",
"cooktime":"5",
"ingredients":"marshmellowrnonion",
"directions":"make the onionrneat the marshrnenjoy",
"created_date":"08/16/2020 20:56:09",
"published_date":null,
"picture":null,
"author":3
},
...
]
]

请记住，我是Javascript的新手，所以我不确定调用JSON.stringfy(recipes(是否真的能准确地表示Javascript中的类型。请检查我的测试方法是否不正确。

我的问题是：需要做些什么才能将API链接的输出与map((方法一起使用？

Answer 1

能够修复它，但我的修复非常粗略。

如上所述，我从API链接得到的响应是一个包含我需要的所有对象的列表中的列表。所以理论上，我只需要列表中的第一个也是唯一一个项目，并在上面调用map((。然而，由于某种原因，这不起作用。如果我在"recipe_list"操作中这样做，它只会给我第一个食谱。如果我在组件本身中使用"props.this.recipes[0]"，它只会给我一个null变量。

然而，在"props.this.recipes"上调用map只会调用一次，而且输入参数正是我所需要的。所以我通过嵌套另一个.map((.来修复它

我解释得很糟糕，这可能不是"正确"的方式，但无论如何，这是代码，以防它可能有所帮助：

class ListRecipes extends Component {
componentDidMount() {
this.props.getAllRecipes();
}
renderRecipes() {
let recipe_nest = this.props.recipes
return recipe_nest.map((recipes) => {
return recipes.map((recipe) => {
return (
<div> {recipe.(information here)} </div>
)
})
})
}
render() {
return (
<React.Fragment>
{this.renderRecipes()}
</React.Fragment>
);
}
}