如何使用物化 css 网格或反应引导网格以在 ReactJS 中的映射响应中显示每行中的 3 个项目？

Question

我试图从同一行的映射响应中显示三个或四个响应项。 我查看了其他堆栈溢出，但他们的问题略有不同，我不知道如何实现我的示例。

我尝试使用引导程序和 css 物化网格来完成这项工作。 但是，该纪录片没有显示我拥有的映射示例。 正如文档所说，还尝试将“row”的className添加到父div，并将“col”的className添加到子div。 但它只是一遍又一遍地重复同一个项目。 我希望每个单独的项目只显示一次。

import React from "react";
import axios from "axios";
import LoadingIndicator from "./loadingIndicator"

const API_KEY="something";
const API_KEY2="something1";
const API_KEY3="something2"

class Recipes extends React.Component {

    state= {
        ingredients:[this.props.ingredients],
        loaded:false
    }

    handleChange=(e)=> {
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    handleSubmit=(e)=> {
        e.preventDefault();
        console.log(this.state);
        axios.get(`https://www.food2fork.com/api/search?key=${API_KEY3}&q=${this.state.name}`)
            .then(res=> {
                console.log(res)
                this.setState({
                    ingredients:res.data.recipes,

                })
            })
    }


    render() {  



        const recipeList = this.state.ingredients.length >0? this.state.ingredients.map((ingredient)=> {
            return(
                <div className="row" key={ingredient.recipe_id}>
                   <div className="col s12 m6 l3">
                    <img className="recipeImage" src={ingredient.image_url}/>
                    <p>{ingredient.title}</p>
                   </div>
                </div>
            )
        }) : <LoadingIndicator loaded={this.state.loaded}/>
        return(
            <div style={{padding:50}}>
            <form className="form" onSubmit={this.handleSubmit}>
                <label>Food Name or Ingredient: </label>
                <input
                    id="name"
                    onChange={this.handleChange}
                    className="formText"
                    type="text"
                    placeholder="type in ingredient or recipe"
                 />
                 <button className="btn waves-effect waves-light" type="submit" name="action">Submit</button>
            </form>
                <div style={{marginTop:100}}>
                    {recipeList}
                </div>   
            </div>
        );
    }

}


export default Recipes;

到目前为止，我已经展示了它，但是相同的响应项在同一行中重复了三遍。 我希望每个单独的项目在每一行上只显示一次

Answer 1

map function 有一个可选的index参数，可用于跟踪迭代中项目的当前index ，以及正在迭代的数组本身的参数。

您本质上想要做的是在每第 0 次、第 3 次、第 6 次等迭代的开始创建div.row开始标记。 您还希望在每 2、5、8 次迭代时关闭标签。 因此，您使用index属性将该代码移动到 if 条件中。

this.state.ingredients.map((ingredient,i, ingredientList) => {
    if (ingredientList.length == 1) { //if only one item in the list add starting and closing tags
        return (
           <div className="row" key={ingredient.recipe_id}>
               <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
               </div>
           </div>
       )        
    else if (i%3 === 0){ 
       return ( //add opening tag at every multiple of 3
        <div className="row" key={ingredient.recipe_id}>
               <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
               </div>
       )
    else if(i%3 === 2 || i === ingredientList.length-1){//add closing tag if last item or 2nd, 5th, 8th...
       return (
             <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
             </div>
         </div>
       )
    else { //Only add element otherwise
       return (
              <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
             </div>
       )
    }
});