提问人：Bhagya Swamy 提问时间：7/22/2018 最后编辑：RickBhagya Swamy 更新时间：7/23/2018 访问量：1723
在 React 组件中渲染 JSON 数组
Rendering JSON array in React component
问：
我正在尝试显示来自 API 的字符串数组。但是我无法遍历该数组。如果我将整个数组传递到 HTML 标签中，那么它将呈现为字符串。
例如：正在工作并显示为字符串。如果我尝试对此进行控制台，它会抛出错误：<div>{data.list.ingredients}</div>data.list.ingredients[0]
Cannot find 0 of undefined
我的阵列：
{
"_id": "5b5446df2c89ab3d0e8d5526",
"title": "Chicken with Mustard Cream Sauce",
"vegetarian": false,
"ingredients": [
"4 whole Boneless Skinless Chicken Breasts",
"2 Tablespoons Olive Oil",
"2 Tablespoons Butter",
"3 whole Garlic Cloves Minced",
"1 cup Brandy",
"1 Tablespoon (heaping) Dijon Mustard",
"1 Tablespoon (heaping) Grainy Mustard",
"1/4 cup (to 1/2) Heavy Cream",
"1/4 cup (to 1/2) Chicken Broth",
"Salt And Pepper"
],
"image_url": "http://static.food2fork.com/chickenmustarde587.jpg",
"steps": [
"Amount of cream and broth has slightly decreased add more as needed",
"Cut the chicken breasts in half lengthwise so that you have eight smaller thinner chicken cutlets Salt and pepper both sides",
"Heat oil and butter in a large skillet over mediumhigh heat Cook cutlets on both sides until nice and golden brown and cooked through Remove chicken from the skillet and keep on a plate",
"Reduce the heat to medium Add the garlic to the pan and saute it for a minute stirring to make sure it wont burn Next pour in the brandy or wine if using being careful if cooking over an open flame Then just let the booze bubble up and cook until its reduced by half",
"Throw in the mustards and stir to combine then pour in the cream Stir in chicken broth adding more if the sauce seems too thick Taste sauce and adjust whatever you think it needs Add chicken breasts back to the pan nestling them into the sauce Allow sauce to cook for another few minutes shaking the pan if needed to move things around",
"Serve chicken with a green salad spooning the sauce over the top"
],
"serving": 5,
"cooking_time": 20
}
答：
0赞
Anshul Bansal
7/22/2018
#1
function renderData(){
let array = ['a','b','c','d' ];
return array.map((item, index) => <div key={index}>{ item }</div>);
}
评论
1赞
YoannFleuryDev
7/22/2018
使用数组作为键是一种不好的做法，请小心。index
0赞
Shahriat Hossain
7/22/2018
#2
我假设您使用的是 axios（API 组件），因此在您的情况下，您可以获得如下结果：
axios.get('/youringredients.json')
.then(res => {
const ingredient = res.data.list.ingredients[0];
console.log(ingredient);
});
您也可以在您所在的州使用成分。
评论
0赞
Bhagya Swamy
7/23/2018
我没有使用公理。localhost：8000/recipes/？dish=${查询}getData = query => { const { sendInitialRecipeList, setInitialSelectedRecipe } = this.props; fetch() .then(data => data.json()) .then(response => { sendInitialRecipeList(response); setInitialSelectedRecipe(response[0]); }) .catch(err => console.log(err)); };
0赞
Shahriat Hossain
7/23/2018
您可以使用 JSON.parse（） 将 json 字符串转换为 javascript 对象，然后根据需要使用该对象。
评论
getData = query => { const { sendInitialRecipeList, setInitialSelectedRecipe } = this.props; fetch() .then(data => data.json()) .then(response => { sendInitialRecipeList(response); setInitialSelectedRecipe(response[0]); }) .catch(err => console.log(err)); };