这是我对给出的练习的回答。我想分享这个，因为你已经尝试过了。可能有不同的方法来做到这一点。走自己的路。这是我如何做到的。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';

class Data extends Component {
  constructor(props) {
   super(props);

   this.state = {
     array: []
   };

   this.renderRecipes = this.renderRecipes.bind(this);
 }

 componentDidMount(){
   axios
     .get('https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json')
     .then(({ data })=> {
       console.log(data);
       this.setState(
         { array: data.recipes }
       );
     })
     .catch((err)=> {})
 }

 render() {
   console.log(this.state.array);
   return(
     <div>
       <h3>Recipes</h3>
       <ul className="list-group">
          {this.renderRecipes()}
       </ul>
     </div>
   );
 }

 renderRecipes() {
   console.log(this.state.array);
   return _.map(this.state.array, recipe => {
     return (
       <li className="list-group-item" key={recipe.name}>
           {recipe.name}
           <ul className="list-group">
              Ingredients:
              {this.renderIngredients(recipe)}
           </ul>
       </li>
     );
   });
 }

 renderIngredients(recipe) {
    return _.map(recipe.Ingredients, ingredient => {
        return (
          <li className="list-group-item" key={ingredient.name}>
              <p>Name: {ingredient.name}, Amount: {ingredient.amount}</p>
          </li>
        );
    });
 }
}

export default Data;

在这里我已经修复了它。你已经更新了代码，所以我现在记不起最初的代码了。我认为问题出在您的渲染方法中。使用此代码，您可以在浏览器中列出所有配方名称。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';

class Data extends Component {
  constructor(props) {
   super(props);

   this.state = {
     array: []
   };

   this.renderRecipes = this.renderRecipes.bind(this);
 }

 componentDidMount(){
   axios
     .get('https://crossorigin.me/https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json')
     .then(({ data })=> {
       console.log(data);
       this.setState(
         { array: data.recipes }
       );
     })
     .catch((err)=> {})
 }

 render() {
   console.log(this.state.array);
   return(
     <div>
       <h3>Recipes</h3>
       <ul className="list-group">
          {this.renderRecipes()}
       </ul>
     </div>
   );
 }

 renderRecipes() {
   console.log(this.state.array);
   return _.map(this.state.array, recipe => {
     return (
       <li className="list-group-item" key={recipe.name}>
           {recipe.name}
       </li>
     );
   });
 }
}

export default Data;

我想给你留下一个练习。

练习 更改此代码，以便您可以列出每个食谱的所有成分。在这里，我列出了所有的食谱名称。您只需要为每个食谱添加成分并将它们放在一起。这将帮助您提高您在 React 领域的知识。

希望这可以帮助。快乐编码！