Reactjs react-redux：在API调用后呈现组件

我正在开发一个应用程序，它使用用户输入并显示食谱的数量，他们也可以点击食谱卡查看配料。每次他们点击配方卡，我都会调用API来获取合适的配方成分。但我不知道如何显示包含配方成分的成分。我也尝试了条件路由和条件渲染，但找不到解决方案

Recipe_Template.js

  export class RecipeTemplate extends Component {
  renderRecipe = recipeData => {
    return recipeData.recipes.map(recipeName => {
      return (
        <div className="container">
          <div className="row">
            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <a
                href={recipeName.source_url}
                target="_blank"
                onClick={() => {
                  this.props.fetchRecipeId(recipeName.recipe_id);
                }}
              >
                <img
                  src={recipeName.image_url}
                  className="mx-auto d-block img-fluid img-thumbnail"
                  alt={recipeName.title}
                />
                <span>
                  <h3>{recipeName.title}</h3>
                </span>
              </a>
              <span}>
                <h3>{recipeName.publisher}</h3>
              </span>
            </div>
          </div>
        </div>
      );
    });
  };

  render() {
    return (
      <React.Fragment>
        {this.props.recipe.map(this.renderRecipe)}
      </React.Fragment>
    );
  }
}

导出类RecipeTemplate扩展组件{
renderRecipe=recipeData=>{
返回recipeData.recipes.map（recipeName=>{
返回(
{recipeName.publisher}
);
});
};
render（）{
返回(
{this.props.recipe.map（this.renderRecipe）}
);
}
}

Recipe_Detail.js

class RecipeDetail extends Component {
  renderRecipeDetail(recipeData) {
    return recipeData.recipe.ingredients.map(recipeIngredient => {
      return <li key={recipeIngredient}>recipeIngredient</li>;
    });
  }

  render() {
    if (this.props.recipeId === null) {
      return <div>Loading...</div>;
    }
    return <ul>{this.props.recipeId.map(this.renderRecipeDetail)}</ul>;
  }
}

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

export default connect(mapStateToProps)(RecipeDetail);

类RecipeDetail扩展组件{
RenderRecipedDetail（recipeData）{
返回recipeData.recipe.Components.map（RecipeInput=>{
return
recipeIngredient
；
});
}
render（）{
if（this.props.recipeId==null）{
返回装载。。。；
}
return
{this.props.recipeId.map（this.renderRecipeDetail）}
；
}
}
函数MapStateTops（{recipeId}）{
返回{recipeId}；
}
导出默认连接（MapStateTops）（RecipeDetail）；

不完全确定您为什么需要在这里使用Redux（除非它在其他嵌套组件之间共享），但我相当确定您可以使用React state

---

一种方法是按如下方式配置路由：

    <Route path="/recipes" component={Recipes} />
    <Route path="/recipe/:id" component={ShowRecipe} />

为了简单起见，它可能看起来像：

<ul>
  <Link to="/recipe/id?recipeId=08861626">View Prosciutto Bruschetta Recipe</Link>
  <Link to="/recipe/id?recipeId=04326743">View Pasta Bundt Loaf Recipe</Link>
  ...etc
</ul>

<div>
  {this.state.recipes.map(({recipeId, recipeName, recipeDetail}), => (
    <Card key={recipeId} recipeName={recipeName} recipeDetail={recipeDetail} />
  )}
</div>

---

另一种方法：

    <Route path="/recipes" component={Recipes} />
    <Route path="/recipe/:id" component={ShowRecipe} />

在原始获取的

配方中存储并提供
RecipedDetails
。然后映射
配方
，并为每个
配方
创建多个
组件

为了简单起见，它可能看起来像：

<ul>
  <Link to="/recipe/id?recipeId=08861626">View Prosciutto Bruschetta Recipe</Link>
  <Link to="/recipe/id?recipeId=04326743">View Pasta Bundt Loaf Recipe</Link>
  ...etc
</ul>

<div>
  {this.state.recipes.map(({recipeId, recipeName, recipeDetail}), => (
    <Card key={recipeId} recipeName={recipeName} recipeDetail={recipeDetail} />
  )}
</div>


{this.state.recipes.map（{recipeId，recipeName，recipeDetail}），=>(
)}

然后每个卡都有自己的状态：

Card.js

export default class ShowRecipe extends Component {
  state = { recipeDetail: '' }

  componentDidMount = () => {
     const { recipeId } = this.props.location.query; // <== only natively available in react-router v3

     fetch(`http://someAPI/recipe/id?recipeId=${recipeId}`)
      .then(response => response.json())
      .then(json => this.setState({ recipeDetail: json }));
  }

  render = () => (
    !this.state.recipeDetails
      ? <div>Loading...</div>
      : <ul>
         {this.state.recipeDetail.map(ingredient => (
           <li key={ingredient}>ingredient</li>
         )}
        </ul>
  ) 
}

export default class Card extends Component {
      state = { showDetails: '' }

      toggleShowDetails = () => this.setState(prevState => ({ showDetails: !this.state.showDetails }))     

      render = () => (
        <div>
          <h1>{this.props.recipeName} Recipe</h1>
          <button onClick={toggleShowDetails}> {`${!this.state.showDetails ? "Show" : "Hide"} Recipe<button>
          { this.state.showDetails &&
             <ul>
              {this.props.recipeDetail.map(ingredient => (
               <li key={ingredient}>ingredient</li>
              )}
            </ul>
          }
      ) 
    }

导出默认类别卡扩展组件{
状态={showDetails:'}
toggleShowDetails=（）=>this.setState（prevState=>（{showDetails:！this.state.showDetails}））
渲染=（）=>(
{this.props.recipeName}配方
{`${！this.state.showDetails？“Show”：“Hide”}
{this.state.showDetails&&

{this.props.recipedeail.map（成分=>(
成分
)}

}
) 
}

因此，默认情况下，
recipedeail
已存在，但已隐藏。但是，当用户单击卡的按钮时，它会将卡的
showDetails
状态切换为
true/false
，以显示/隐藏配方详细信息。
非常感谢。我选择了第二种方式。再次感谢。